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

Posted 2023-05-07

【中文标题】为啥 Gecko 和 Blink 在处理 inline-block 元素时高度计算如此不一致？

【英文标题】：Why is the height calculation so inconsistent in Gecko and Blink when dealing with inline-block elements?为什么 Gecko 和 Blink 在处理 inline-block 元素时高度计算如此不一致？

【发布时间】：2015-09-27 20:47:25

【问题描述】：

如下所示，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>

【参考方案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，请务必记住指定垂直对齐方式，以防止错位。

【讨论】：

太棒了！请注意：您的 Gecko 修复使情况变得更糟。但是，如果我删除 margin-top 和 margin-bottom 属性，一切看起来都很完美。谢谢！

是的，上边距和下边距可能需要根据个人用例进行调整（有时 0 效果最好）。这取决于您的box-sizing、line-height 等一些东西。我通常使用border-box 和px 高度，而-2px 有效。如果没有，请尝试一下，一旦找到好的设置，将其用作“重置”的一部分，然后忘记它。