為什么按鈕元素的高度與具有相同高度屬性的兄弟輸入元素的高度不匹配？

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 where-as 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強制它使用計算維度的內容框方法。

編輯 - 更多信息 ： 為什么Firefox使用IE框模型作為輸入元素？