IE10 line-height bug with display:inline-block; and overflow:hidden;

Question

I've recently run in to a peculiar problem in IE10 (sigh). It appears that if you use display:inline-block; in conjunction with overflow:hidden; IE10 messes up your line-height. I tried fixing it using vertical-align:middle; but that only almost fixes the problem in IE10 and then introduces baseline problems in other browsers.

The only code needed to trigger the bug is:

CSS:

.bug {
  display:inline-block;
  overflow:hidden;
}

HTML:

<p>This should <span class="bug">be buggy</span> in IE10</p>

I created a JSFiddle to illustrate the bug - http://jsfiddle.net/laustdeleuran/5pWMQ/.

There's also a screenshot of the bug here - https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a

EDIT:

This is not a IE10 bug (but more a case of lazy testing on my behalf). Actually Chrome (webkit) is the one doing it wrong - https://stackoverflow.com/a/15883508/799327.

Answer 1

CSS 2.1 says

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.

which is exactly what IE10 is doing.

And Firefox and Opera are doing the same thing.

It's not IE that's bugged, it's Chrome, which is not following the above rule correctly.