Why does IE (and Firefox 4) not properly wrap this? (hasLayout??)

Question

I have the following (http://jsfiddle.net/gVZwr/4/):

<div>
    <label>From</label>
    <span>Some Content Goes Here</span>
</div>

span {
    display: inline-block;
    overflow:hidden;
}

in IE8/9, the label and span don't align (the label is lower than the span).

Why??? I can fix it by putting overflow:hidden on the label, but I want to know what's causing it. I tried the old “hasLayout” fixes, such as putting zoom:1 on the label, but nothing seems to fix it except, specifically, overflow.

Answer 1

Your problem is that inline-block elements with overflow set to anything other than visible have a baseline that's at the bottom edge of the box (actually, of the bottom margin of the box) instead of having a baseline at the text baseline. See http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align the very last paragraph.

Then that baseline, which basically corresponds to the bottom edge of the span's border in your situation is aligned with the baseline of the label, which is the actual baseline of the text in the label. So the text of the label ends up below the text of the span visually.

WebKit doesn't follow the spec here and seems to be unwilling to change that because there's WebKit-specific non-Web content that depends on its current behavior. That's why you're not seeing the effect in WebKit.

Opera 11 does the same thing as IE and Firefox here, per spec.

Oh, and as far as fixing, you can either change the vertical-align of the label or take out the overflow on the span, assuming you actually need the span to be inline-block.

Answer 2

Try vertical-align: http://jsfiddle.net/gVZwr/2/

Answer 3

How about making the <label> inline-block as well? I think inline-block affects the vertical alignment of elements.

(And, going off-topic, see @josmh’s answer about what <label> is for, i.e. labelling form fields.)

Answer 4

It's probably because the <label> is meant to be bound to something. Here are some examples.