您可以通过运行以下命令来重现此内容测试用例 http://dl.dropbox.com/u/6900/resources/20101129-vertical-align-baseline-overflow-hidden.html。结果如下面的屏幕截图所示。问题是在 Firefox 上,当添加overflow: hidden
在“块”上(屏幕截图中带有灰色背景),块停止按照我希望的方式对齐:块中文本的基线不是与父框的基线对齐,而是就好像块的底部与父框的基线对齐。正如您在屏幕截图中看到的,Chrome 不会发生这种情况。
- 这是 Firefox 的错误吗?
- 如何在 Firefox 上获得预期结果(基线对齐
overflow: hidden
)?
注意:使用vertical-align: middle
在“块”上并没有减少它,因为我真正想要的是基线对齐。你可以更清楚地看到vertical-align: middle
不通过设置进行基线对齐padding: 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。
Update:
看起来 Firefox 和 Opera 正在正确渲染溢出:隐藏的内联块,而 Webkit 浏览器则不然。
根据W3C CSS2 工作草案的视觉格式化模型详细信息 http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align,
“内联块”的基线是
最后一个行框的基线
正常流程,除非有
没有流入线框或者如果
'overflow' 属性有一个计算的
除“可见”之外的值,其中
情况下基线是下边距
边缘。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)