嵌套的内联元素“垂直对齐”在 Chrome 和 Firefox 上的行为不同答案

【问题标题】：Nested inline element 'vertical-align' behaves different on Chrome and Firefox嵌套的内联元素“垂直对齐”在 Chrome 和 Firefox 上的行为不同
【发布时间】：2021-01-30 08:25:14
【问题描述】：

我在 span 中放置了一个 span 元素，并为外部 span 设置了 vertical-align: 20px，为内部 span 设置了 vertical-align: top。 HTML 和 CSS 代码在这里。 codepen

.mid {
  vertical-align: 20px;
  outline: 1px solid;
}

.right {
  vertical-align: top;
    outline: 1px solid;
}

.se {
  vertical-align: top;
}

<html>

<body>
  <p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>

</body>

</html>

在 Chrome 上显示

在 Firefox 上显示

什么是标准行为？

【问题讨论】：

标签： css frontend inline vertical-alignment

【解决方案1】：

如果我们关注the specification 描述的行框，我们可以阅读：

如内联格式化上下文部分所述，用户代理将内联级框流到行框的垂直堆栈中。一个line box的高度是这样确定的：

计算行框中每个行内级框的高度。对于替换元素、inline-block 元素和 inline-table 元素，这是它们的边距框的高度；对于内联框，这是它们的“行高”。

内联级框根据其“vertical-align”属性垂直对齐。如果它们对齐“顶部”或“底部”，则它们必须对齐以最小化线框高度。

线框高度是最上面的框顶部和最下面的框底部之间的距离。（这包括支柱，如下面的“线高度”中所述。）

在 Chrome 中，该元素显然位于其行框之外，因此对我来说这听起来像是一个错误。如果我们添加边框，我们可以清楚地看到溢出：

.mid {
  vertical-align: 20px;
  outline: 1px solid;
}

.right {
  vertical-align: top;
    outline: 1px solid;
}

.se {
  vertical-align: top;
}

p {
  border:2px solid red;
}

<html>

<body>
  <p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>

</body>

</html>

另一个有趣的结果，如果你设置vertical-align:-20px

.mid {
  vertical-align: -20px;
  outline: 1px solid;
}

.right {
  vertical-align: top;
  outline: 1px solid;
}

.se {
  vertical-align: top;
}

p {
  border:2px solid red;
}

<html>

<body>
  <p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>

</body>

</html>

Firefox 将使 C 元素粘在p 的顶部，这是合乎逻辑的结果。 Chrome 将再次做不同的事情，我认为这也是一个错误。

值得注意的是，如果您将 mid 元素设置为 inline-block，您将获得一致的行为，因为对齐更容易，并且浏览器和 C 现在都将考虑 mid 内的行框并将始终坚持其顶

.mid {
  vertical-align: -20px;
  outline: 1px solid;
  display:inline-block;
}

.right {
  vertical-align: top;
  outline: 1px solid;
}

.se {
  vertical-align: top;
}

p {
  border:2px solid red;
}

<p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>

<p class="out">A<span class="mid" style="vertical-align: 20px">B<span class="right">C</span>D</span><span class="se">E</span></p>

好吧，如果我们按照下面的示例，似乎对 chrome 所做的事情有一个合乎逻辑的解释

.mid {
  outline: 1px solid;
}

.right {
  vertical-align: top;
  outline: 1px solid;
}

.se {
  vertical-align: 40px;
}

p {
  border: 2px solid red;
  display: inline-block;
}

<p class="out">A<span class="mid" style="vertical-align:baseline">B<span class="right">C</span>D</span><span class="se">E</span></p>

<p class="out">A<span class="mid" style="vertical-align: 20px;">B<span class="right">C</span>D</span><span class="se">E</span></p>

<p class="out">A<span class="mid" style="vertical-align: 40px">B<span class="right">C</span>D</span><span class="se">E</span></p>

<p class="out">A<span class="mid" style="vertical-align:-20px">B<span class="right">C</span>D</span><span class="se">E</span></p>

chrome 似乎首先将 C 元素放在顶部（考虑到默认基线对齐到 mid），然后对齐中间元素，这会产生奇怪的结果。 C 从顶部开始移动.mid 元素中设置为vertical-align 的像素值。

【讨论】：