爲什麼按鈕元素的高度與具有相同高度屬性的同級輸入元素的高度不匹配？

Question

我有以下幾點：

<div style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div> 
<input style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text"> 
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button> 

正如你可以在這個jsFiddle看到，爲什麼比其他人短按鈕元素1px的？在Chrome和Firefox中。

Answer 1

它與瀏覽器實現這些元素的盒子模型的方式有關。

div和input都使用content-box其中，作爲button使用border-box

這裏看到更多的信息：http://www.quirksmode.org/css/box.html

您可以添加box-sizing: content-box;，-moz-box-sizing: content-box;，-ms-box-sizing: content-box;

的CSS，迫使它使用計算維度的內容框方法。

編輯 - 更多信息：Why does Firefox use the IE box model for input elements?