CSS高度：20px + padding-bottom：3px = 20px？

我有我的網頁上輸入type="submit"和height:20px, padding-bottom:3px. 所以螢火顯示該按鈕具有height 17px和padding-bottom: 3px所以總高度爲20像素代替的23像素。

任何人都可以幫我弄清楚這是firefox或firebug的問題嗎？

這裏是鏈接http://jsfiddle.net/tKZ5Y/ 您可以使用Firebug檢查所呈現的提交按鈕

你可以設置一個演示頁面供我們查看。 – Starx

填充是包含在框內的「餘量」。保證金是外部框。

<input>中的填充將簡單地對齊輸入內的文本。如果你使用padding-top和padding-bottom 10px和text 10px，那麼文本將位於30px容器的中間。

另外請注意，Firefox將文本提交輸入內容比所有其他瀏覽器低一點。雖然有一個修復。

2011-08-29 08:48:27 yosh

@Sayem Ahmed：我認爲你的anwer是downvoted，因爲它沒有正確描述箱模型如何工作。 – Guffa

@Guffa：我第一次在答案中提供了鏈接，然後我編輯了它以包含有關模型的更多信息，但那並不奏效......無論如何，現在並不重要:-) –

@Sayem Ahmed：框模型沒有解釋如何將填充應用於按鈕，並且有關模型的信息不正確。 – Guffa

使用的保證金，而不是填充..填充設置元素內容保證金延長

2011-08-29 08:42:55

填充不包括在高度（這是IE6的主要問題）。請參考文檔 –

填充內部的工作方式不同的按鈕（和大多數表單域）。填充是包含在寬度和高度中（除非寬度是動態的（即按鈕的默認值），則填充將添加到寬度中）。

我只是在Firefox，IE，Chrome和Opera的tested this，它是一致的。

唯一的區別是，當文字的高度變得很小時，Opera會作出不同的反應，即垂直居中而不是將其置於頂部填充之下。

2011-08-29 08:46:27 Guffa

這不是一個問題，它的輸入組件

2011-08-29 08:49:26 iMysak

PPK says it's a bug的正常行爲。當我向一個按鈕聲明padding-bottom時，Chrome似乎沒有任何反應，所以...我不知道。最重要的事情，我想，就是可以解決此問題在Firefox和Opera（至少）使用get：

input[type=submit] { 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

2011-08-29 08:53:30

<input type="submit">是在壁虎的UA樣式風格爲-moz-box-sizing: border-box，對網站的compat的。如果您想要使用非默認行爲，請相應地調整框的大小。

2011-08-29 16:54:56

回答