为什么按钮元素的高度与具有相同高度属性的兄弟输入元素的高度不匹配？

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-boxwhere-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框模型作为输入元素？