CSS：为什么当使用溢出：隐藏时，vertical-align：baseline在Firefox上停止工作？

Question

您可以通过运行此 测试来重现此问题案例。结果如下面的屏幕截图所示。问题是，在 Firefox 上，当在“块”（屏幕截图中带有灰色背景）上添加 overflow:hidden 时，该块停止按照我希望的方式对齐：而不是块中文本的基线与父框的基线对齐，就好像块的底部与父框的基线对齐一样。正如您在屏幕截图中看到的，Chrome 不会发生这种情况。

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

注意：使用 vertical-align ：“块”上的 middle 并不能消除它，因为我真正想要的是基线对齐。通过设置 padding: 1em 0 .1em 0（在框的顶部有更多的内边距）可以更清楚地看到 vertical-align: middle 并没有进行基线对齐，这会给你：

Answer 1

它看起来确实像溢出：隐藏是有问题的，因为它从内联块元素中删除了基线。幸运的是，有一个看似多余的 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 正在正确渲染溢出：隐藏的内联块，而 Webkit 浏览器则不然。

根据W3C CSS2 工作草案的视觉格式化模型详细信息 ,

“内联块”的基线是
最后一个行框的基线
正常流程，除非有
没有流入线框或者如果
'overflow' 属性有一个计算的
除“可见”之外的值，其中
情况下基线是下边距
边缘。

Answer 2

尝试将 vertical-align: text-bottom; 添加到 .block

您也可以尝试为 .label 和 设置相等的行高>.block

Answer 3

尝试

.label {
        float: left;
        line-height: 30px;
        margin-right: 5px;
        }

这将在 FF 和 Chrome/Safari 中获得所需的结果。不过没有在IE中测试。