CSS:为什么是vertical-align:在使用overflow时,基线停止在Firefox上工作:hidden?

前端之家收集整理的这篇文章主要介绍了CSS:为什么是vertical-align:在使用overflow时,基线停止在Firefox上工作:hidden?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
您可以通过运行此 test case重现此结果.结果显示在下面的屏幕截图中.问题是,在Firefox上,当添加一个溢出:隐藏在“块”(截图中有灰色背景)时,阻止块按照我想要的方式对齐:而不是基于块与父框的基线对齐,就好像块的底部对齐在父框的基线上.如您在截图中看到的那样,Chrome不会发生这种情况.

这是Firefox的错误
>如何在Firefox上获得预期的结果(基线与overflow:hidden对齐)?

注意:使用vertical-align:中间的“block”不会切割它,因为我真正想要的是基线对齐.您可以更清楚地看到vertical-align:中间没有通过设置填充来进行基线对齐:1em 0 .1em 0(更多的填充在顶部的框),它给你:

解决方法

它看起来像溢出:隐藏是错误的,它从内联块元素中删除基线.幸运的是,有一个看似冗余的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,

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.

猜你在找的CSS相关文章