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

Question

您可以通过运行此测试用例来重现此问题.结果显示在下面的屏幕截图中.问题是在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工作草案的视觉格式模型细节,

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

Answer 2

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

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