Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 286
Laust Deleuran Avatar asked Apr 08 '13 15:04

Laust Deleuran


People also ask

How to display a CSS file in an inline-block?

Here is the simple code: <link rel='stylesheet' type='text/css' href='test.css'> display: inline-block;

What is the difference between display inline and display inline-block?

❮ Previous Next ❯. Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Is there a way to fix ie5/6 page width issues?

The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you'd usually go on about:

What is the Internet Explorer 6 “float” bug?

This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated.


1 Answers

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.

like image 185
Alohci Avatar answered Oct 12 '22 15:10

Alohci