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

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-盒子

查看此处了解更多信息:http://www.quirksmode.org/css/box.html

您可以添加box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing : 内容框;

强制 CSS 使用内容框方法计算尺寸。

编辑--更多信息:Why does Firefox use the IE box model for input elements?