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

【问题标题】：Why does a button element's height not match that of a sibling input element with same height properties?为什么按钮元素的高度与具有相同高度属性的同级输入元素的高度不匹配？
【发布时间】：2011-03-22 02:56:24
【问题描述】：

我有以下几点：

<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 中。

【问题讨论】：

标签： html firefox google-chrome css

【解决方案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 强制它使用 content-box 方法来计算尺寸。

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

【讨论】：