在处理内联块元素时，为什么Gecko和Blink中的高度计算不一致？

Question

如下所示，Gecko和Blink对不同的内联块元素执行不一致的高度计算，即使它们都具有相同的css类。看起来像^{（* pause *）} Trident是唯一能够做到正确的布局引擎。

我忘了（重新）设置一个属性吗？

此外，正如您在 fiddle 中看到的那样，如果我将填充从.3em更改为1em，则按预期更改闪烁。所有元素都具有相同的高度。但壁虎仍然“破碎”。

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

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

Gecko （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）总是比其他元素宽2倍且更高。

要解决此问题，请始终将其添加到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;
}

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

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

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

将上面的两个属性声明为始终是一个好习惯 - 如果指定了内联块，请始终记住指定垂直对齐，以防止错位。