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

我有以下资料：

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

Div
按钮

---

如您所见，为什么按钮元素1px比其他元素短？在Chrome和firefox中。

这与浏览器为这些元素实现框模型的方式有关

div

和

input

都使用

内容框

，其中as

按钮

使用

边框框

有关更多信息，请参见此处：

您可以添加

框大小：内容框，
-moz框大小：内容框，
-ms框大小：内容框

强制CSS使用内容框方法计算维度

编辑--更多信息：