CSS:为什么垂直对齐:使用溢出时基线在 Firefox 上停止工作:隐藏？

Question

您可以通过运行此 test case 来重现它.结果显示在下面的屏幕截图中。问题是，在 Firefox 上，当在“ block ”(屏幕截图中的灰色背景)上添加 overflow: hidden 时， block 停止对齐，因为我希望它是:而不是 block 中文本的基线与父框的基线对齐，就好像 block 的底部与父框的基线对齐一样。正如您在屏幕截图中所见，Chrome 不会发生这种情况。

1. 这是 Firefox 的错误吗？
2. 如何在 Firefox 上获得预期结果(与 overflow: hidden 基线对齐)？

注意:在“ block ”上使用 vertical-align: middle 并没有削减它，因为我真正想要的是基线对齐。您可以更清楚地看到 vertical-align: middle 不通过设置 padding: 1em 0 .1em 0 进行基线对齐(框顶部有更多填充) ，它给你:

Answer 1

看起来 overflow:hidden 确实有问题，因为它从内联 block 元素中删除了基线。幸运的是，有一个看似多余的 Mozilla CSS 溢出值可以防止溢出，但不会出现这种错误行为。

试试这个:

.block {
    width: 10em; padding: .3em 0 .1em 0;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid #666; background-color: #eee;    
}

看起来它解决了 Firefox 中的问题并且不会与 Safari 混淆。

更新:

看起来 Firefox 和 Opera 正在渲染溢出:正确隐藏内联 block ，而 Webkit 浏览器则没有。

根据W3C CSS2 Working Draft's Visual Formatting Model Details ,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.