我将一个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 上，它显示
什么是标准行为？
最佳答案
如果我们遵循the specification描述行框我们可以阅读:
As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:
- The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
- The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height.
- The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
在 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 元素设置为内联 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 的默认基线对齐)，然后对齐 mid 元素，这会产生奇怪的结果。 C 从顶部移动 .mid 元素的 vertical-align 设置的像素值。
关于css - 嵌套内联元素 'vertical-align' 在 Chrome 和 Firefox 上的行为不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65966021/