CSS：为什么vertical-align：baseline在使用overflow：hidden时停止在Firefox上工作？

Question

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

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



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

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 Working Draft's Visual Formatting Model Details，

  

'内联块'的基线是   它的最后一个行框的基线   正常流量，除非它有   没有流入线盒或者如果它   '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中测试。