CSS: Why is vertical-align: baseline stop working

问题:

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:

回答1:

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.

回答2:

try adding vertical-align: text-bottom; to .block

you can also try to set equal line-heights for .label and .block

回答3:

try

.label {
        float: left;
        line-height: 30px;
        margin-right: 5px;
        }

this will get the desired result in both FF and Chrome/Safari. Did not test in IE however.