CSS: Why is vertical-align: baseline stop working on Firefox when using overflow: hidden?

Question

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

Answer 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.

Answer 2

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

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

Answer 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.