为什么 Gecko 和 Blink 在处理 inline-block 元素时高度计算如此不一致？

Question

如下所示，Gecko 和 Blink 对不同的 inline-block 元素执行不一致的高度计算，即使它们都具有相同的 css 类。似乎 ^(*pause*) Trident 是唯一能做到这一点的布局引擎。

我是否忘记（重新）设置属性？

此外，正如您在此 fiddle 中所见，如果我将填充从 .3em 更改为 1em，则 Blink 将按预期呈现。所有元素都具有相同的高度。 Gecko 仍然“坏掉”了。

有谁知道为什么会发生这种情况以及如何解决它？

---

<a> <button> <input> <span>

---

壁虎（Firefox v. 39.0）

---

闪烁（Google Chrome v. 43.0.2357.132 m）：

---

三叉戟（Internet Explorer v. 11.0.9600.17843）：

---

body {
    font: normal 15px arial;
    padding: 1em;
}

.button {
    background: #444444;
    border: none;
    box-sizing: content-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-size: 1em;
    height: auto;
    line-height: normal;
    margin: 0;
    min-height: 1em;
    padding: .3em;
    text-decoration: none;
}

<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>

Answer 1

对于 Gecko (Firefox)，这是由于表单元素在 ::moz-focus-inner 上的边框。如果您注意到，表单元素（input 和 button）总是比其他元素宽和高约 2px。

要解决它，请始终将其添加到您的 CSS（作为重置的一部分）：

button::-moz-focus-inner{
    border:0;
    padding:0;
    margin-top:-2px;
    margin-bottom:-2px;
}
input::-moz-focus-inner{
    border:0;
    padding:0;
    margin-top:-2px;
    margin-bottom:-2px;
}

负边距是必要的，以便字体在行高中“正确”显示。您可能需要调整这些值以适合您的行高，但这些值大部分都可以正常工作。

对于 Blink (Chrome)，元素实际上大小相同，但唯一的问题是它们“未对齐”。您会注意到，在inline-block 设置中，有时表单元素显示得比其他元素略低。要解决它，只需确保它们都使用相同的垂直对齐方式，例如：

display: inline-block;
vertical-align: top;

将上面的两个属性一起声明总是一个好习惯 - 如果您指定 inline-block，请务必记住指定垂直对齐方式，以防止错位。