IE10 display line error: built-in block; and overflow: hidden;

Question

So, I recently ran into a particular problem in IE10 (sigh). It looks like if you use display: inline-block; in combination with overflow: hidden; IE10 ruined your line height. I tried to fix it using vertical-align: middle; but it only almost fixes the problem in IE10, and then introduces the main problems in other browsers.

The only code needed to run the error 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 error - http://jsfiddle.net/laustdeleuran/5pWMQ/ .

Here is also a screenshot of the error - http://cl.ly/image/2U1g3i0b0Y2y

Has anyone seen / fixed this problem before?

EDIT:

This is not an IE10 bug (but this is another case of lazy testing on my behalf). Actually Chrome (webkit) is doing it wrong - stack overflow site/questions/942194 / ....

Answer 1

CSS 2.1 says

The base level of the “built-in block” is the base level of its last line row in the normal stream, if it has no lines in the stream, or if its “overflow” property has a calculated value other than “visible”, in this case the base is edge of the bottom edge.

which is what IE10 does.

Both Firefox and Opera do the same.

This is not the IE that was listening, it is Chrome that does not comply with the rule above.