火狐/ Safari瀏覽器設置高度爲[指定的高度 - 填充 - 邊界用於輸入[類型=按鈕]

input[type=button] { 
    background-color: white; 
    border: 1px solid black; 
    font-size: 15px; 
    height: 20px; 
    padding: 7px; 
}

與此HTML：

<input type="button" value="Foo" />

我希望看到這一點，所以總高度成爲36px：

1px border 
7px padding 
20px content (with 15px text) 
7px padding 
1px border

但不是兩者的Firefox 3.6和Safari 4 SH這個流量（有沒有在其他瀏覽器測試）

1px border 
7px padding 
4px content (with 15px text) => height - 2 * border - 2 * padding 
7px padding 
1px border

有沒有人有任何想法，爲什麼出現這種情況？

（即使是預期的行爲，什麼是其背後的邏輯是什麼？）

2010-02-14 Douwe Maan

圖片鏈接斷開（使用imgur！） – 2012-08-22 06:18:20

表單元素歷來有width/height，其中包括他們的填充/邊界，因爲他們最初是由瀏覽器實現爲OS原生UI組件，其中CSS有超過裝飾品沒有影響。

要重現此問題，Firefox和其他導致某些表單域（選擇，按鍵/輸入型按鈕）與CSS3 box-sizing樣式設置爲border-box，使width屬性反映整個渲染區域寬度包括邊界和填充。

您可以禁用此行爲：（或者，這是您要使用「100％」的寬度，可以設置其他人border-box液態佈局多見）

select, button { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
}

瀏覽器的前綴版本必須在那裏才能捕捉在標準化過程到目前爲止實現此目標的瀏覽器。不過，這對IE6-7來說是無效的。

2010-02-14 11:22:35 bobince

非常感謝！作品很有魅力 – 2010-02-14 11:26:36

太棒了！不知道，謝謝。 – Sinan 2010-09-23 22:10:39

如果可能的話，我會多投一票。 – 2010-10-22 20:34:22

有幾件事情，你可以嘗試：

2010-02-14 11:18:23 Marius

已經嘗試過這些選項，沒有工作。 – 2010-02-14 11:28:26

將DOCTYPE從HTML4 Transitional更改爲HTML5爲我工作。 – TataBlack 2012-01-11 18:20:36

它是有道理的，因爲元素的高度自然比你設定的高。輸入元素被分配一個高度，在這種情況下，這個高度應該足以包含元素的文本，但您將其設置爲較小的值。要顯示此信息，請刪除您的身高設置。

2010-02-14 11:25:07 Rob

其他元素像我說的那樣工作：總高度是'邊框頂部+頂部填充+高度+填充底部+邊框底部'。 – 2010-02-14 11:27:42

我得到它的工作刪除輸入按鈕的填充和高度設置20左右，然後調整高度，錨元素的填充。我還設置行高，字體大小和字體系列。

工作的FF，IE，Safari和Chrome：d

2010-09-30 11:07:44 Rahatur

回答