CSS：为什么vertical-align：baseline在Firefox上使用overflow：hidden时停止工作？ [英] CSS: Why is vertical-align: baseline stop working on Firefox when using overflow: hidden?

问题描述

您可以通过运行此，

'inline-block'是

中正常流程的最后一行框的基线，除非它有
没有流入行框或者
'overflow'属性具有除visible之外的计算的
值，其中
情况基线是底部边缘
edge。

You can reproduce this by running this test case. The results are shown in the screenshot below. The issue is that on Firefox, when adding a overflow: hidden on the "block" (with grey background in the screenshot), the block stop being aligned as I'd like it to be: instead of the baseline of the text in the block being align to the the baseline of the parent box, it is as if the bottom of the block was aligned on the baseline of the parent box. As you can see in the screenshot, this doesn't happen with Chrome.

1. Is this a Firefox bug?
2. How to get the expected result on Firefox (baseline alignment with overflow: hidden)?

Note: Using vertical-align: middle on "block" doesn't cut it, as what I really want is baseline alignment. You can see more clearly that vertical-align: middle doesn't do baseline alignment by setting padding: 1em 0 .1em 0 (more padding at the top of the box), which give you:

解决方案

It does look like overflow:hidden is buggy in that it removes the baseline from an inline-block element. Fortunately, there's a seemingly redundant Mozilla CSS extension value for overflow that prevents overflow but doesn't exhibit this buggy behaviour.

Try this:

.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;    
}

It looks like it corrects the problem in Firefox and doesn't mess with Safari.

Update:

It looks like Firefox and Opera are rendering overflow:hidden inline blocks correctly and Webkit browsers are not.

According to the 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：为什么vertical-align：baseline在Firefox上使用overflow：hidden时停止工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！