HTML <input />＆amp; <按钮>浏览器不一致

Question

小提琴： https://jsfiddle.net/63rfLkgg/2/（代码在这里）

以下CSS在Firefox，Chrome和IE上的呈现方式不同：

input, button {
    min-height: 32px;
    min-width: 32px;
    background-color: #AAA;
    color: #444;
    line-height: 32px;
    font-size: 32px;
}

在Firefox上：按钮高34像素，而不是32。

在Chrome上：文本字段高37px而不是32。

在IE上：与Chrome相同，但在删除vertical-align: middle;时会变得疯狂。

为什么会发生这些事情？

修改

Chrome和IE上的问题可以通过添加vertical-align: middle;和height: 32px;轻松解决，但我仍然想知道为什么问题首先存在。

Answer 1

好的，我做了什么：

Box-Sizing for the win

所以我做的是我添加的按钮：

button {box-sizing: content-box;}

并且我做了输入：

box-sizing: border-box;

我也摆脱了行高，并添加了“登录”＃39;在输入上，你可以看到它在间距上看起来一样。

继承人截图：