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

Question

正如您在下面看到的，Gecko 和 Blink 对不同的内联块元素执行不一致的高度计算，即使它们都具有相同的 css class。似乎 ^(*pause*) Trident 是唯一正确的布局引擎。

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

此外，如您在此 fiddle 中所见，如果我将填充从 .3em 更改为 1em Blink 会按预期呈现.所有元素都具有相同的高度。不过 Gecko 仍然 "broken"。

有谁知道为什么会这样以及如何解决？

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

Gecko（火狐 39.0 版）

Blink (Google Chrome v. 43.0.2357.132 m):

Trident（Internet Explorer 版本 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;
}

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

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

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

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

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

Why is the height calculation so inconsistent in Gecko and Blink when dealing with inline-block elements?

html

css

gecko

blink