Css 嵌套内联元素'；垂直对齐'；在Chrome和Firefox上表现不同

我将一个span元素放在span内，并为外部span设置

垂直对齐：20px

，为内部span设置

垂直对齐：top

。这里有HTML和CSS代码。

.mid{
垂直对齐：20px；
外形：1px实心；
}
.对{
垂直对齐：顶部；
外形：1px实心；
}
.se{
垂直对齐：顶部；
}

ABCDE

如果我们遵循描述行框的说明，我们可以阅读：

如内联格式上下文一节所述，用户代理将内联级别的框流到一个垂直的行框堆栈中。线框的高度确定如下：

将计算线框中每个内联标高框的高度。对于替换的元素、内联块元素和内联表元素，这是其边距框的高度；对于内联框，这是它们的“线高度”

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

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

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

.mid{
垂直对齐：20px；
外形：1px实心；
}
.对{
垂直对齐：顶部；
外形：1px实心；
}
.se{
垂直对齐：顶部；
}
p{
边框：2倍纯红；
}

ABCDE