Weird CSS result in Firefox compared to expected result in chrome (some divs are not aligned but shifted down)

Question

With this HTML markup :

<html>
<body>
    <ul class="tag-list">
        <li class="tag"><div class="tag-label">short tag</div><div class="tag-tail tag-count">1154353</div></li><!--no whitespaces between list items!!--><li class="tag"><div class="tag-label">A quite long long long long long tag</div><div class="tag-tail tag-active">5</div></li>
    </ul>
</body>

And this CSS rules :

.tag-list {
    border:1px solid red;
}

.tag {
    border:1px solid green;
    display:inline-block;/*so that tags are lined up like words... */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    white-space:nowrap; /* so that label & tail sub-divs are stuck all together */
    height: 2em;
    line-height: 2em; /* text is vertically centered */
}

.tag > div {
    height: 100%;
    display:inline-block; /*so that label&tail are lined up */    
}

.tag-tail {
    border:1px solid orange;
}

.tag-label {
    border:1px solid blue;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:10em; /* to generate a (text) overflow for the ellipsis*/
}

I get the expected result in Chrome 22.0.1229.94

But in Firefox 15.0.1, i get a weird result (div.tag-tail elements are shifted down) !

You can compare the results in FF and Chrome with this jsFiddle.

I know that adding the property overflow:hidden; to the selector/rule .tag-tail fixes the issue, but i'd like to understand why this is needed for FF and why there is this difference in behaviors ?

Thank you for your answers !

It seems that this issue has already been commented several times : [here](http://stackoverflow.com/questions/4310047/css-why-is-vertical-align-baseline-stop-working-on-firefox-when-using-overflow), [here](http://stackoverflow.com/questions/11930598/text-in-div-element-is-raised-above-horizontally-aligned-span-element-in-firefox) and [here](http://stackoverflow.com/questions/3789854/overflow-hidden-causing-alignment-issues-in-firefox)... Adding `vertical-align:top;` property to all my divs fixes my issue — halogenr, Oct 23 '12 at 08:59
Tough i'd like to know which browser implementation is right : Chrome webkit or Firefox ? — halogenr, Oct 23 '12 at 09:02

score 1 · Answer 1 · answered Oct 23 '12 at 17:56

The CSS spec says at http://www.w3.org/TR/CSS21/visudet.html#leading last paragraph:

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.

So in your case, the .tag-label has its baseline at the bottom of its margin edge (and since it has no margins, that means at the bottom edge of its bottom border. But the .tag-tail has its baseline on the baseline of the text inside it. And since everything here is baseline-aligned, that means that the baseline of the text in the .tag-tail needs to end up on the same vertical position as the bottom of the border for the .tag-label.

Which is exactly what Firefox does. Chrome doesn't implement the spec for baselines of inline blocks correctly; see https://bugs.webkit.org/show_bug.cgi?id=36084

score 0 · Answer 2 · answered Oct 23 '12 at 09:50

Adding overflow:hidden; seems like a strange thing to add.

I would do what loic suggested in the comments:

Add vertical align. I was going through a similar issue earlier, vertical-align:top; was my solution as well. (By the way, Firefox 16 will also display undesirable results.)

.tag > div {  
     height: 100%;  
    display:inline-block;   
    vertical-align:top;  
    }

mrbinky3000 · Answer 3 · 2012-10-23T18:10:56.007

You just had too much stuff going on in .tag-label

Here is your solution: http://jsfiddle.net/mrbinky3000/JU5Cr/

.tag-label {
    border:1px solid blue;
}

But this is a better solution: http://jsfiddle.net/mrbinky3000/gwb7d/1/

.tag-list {
    border: 1px solid red;
    display: block;
}

.tag {
    border:1px solid green;
    display:inline-block;/*so that tags are lined up like words... */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    white-space:nowrap; /* so that label & tail sub-divs are stuck all together */
    height: 2em;
    line-height: 2em; /* text is vertically centered */
    overflow: hidden;

}

.tag > div {
    height: 100%;
    display:block;
    float: left;        
}

.tag-tail {
    border:1px solid orange;
}

.tag-label {
    border:1px solid blue;
}

If you float a div, it comes out of the "page flow" and the div shrinks to fit the contents, very similarly to what happens when you set something to "inline-block". However, unlike inline-block, you don't have to worry about whitespace in the code messing things up. Display block ignores leading and trailing whitespace.

Weird CSS result in Firefox compared to expected result in chrome (some divs are not aligned but shifted down)

3 Answers3