IE CSS display: inline-block Rendering issue

Question

I'm having an annoying rendering issue with IE my code is

CSS :

div {
    display: inline-block;
    margin-right:40px;
    border: 1px solid;
}

HTML :

<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>

This is how it looks in firefox/chrome (the expected display)

enter image description here

This is how it looks in IE

enter image description here

I googled if IE supports display: inline-block, and apparently it does.

Version of IE? Compatibility mode enabled? – Tim M. Jan 01 '12 at 05:54 — Tim M., Jan 01 '12 at 05:54

Tim M. · Answer 1 · 2012-01-01T06:20:08.510

Working Solution

The following appears to work correctly in:

Quirks mode
IE 7 Standards
IE 8 Standards
IE 9 Standards
IE 9 Compatibility Mode

<!DOCTYPE html>
<html>
<head>
    <style>

    DIV {
        display: inline-block;
        *display: inline; /* leading asterisk IS correct */
        margin-right:40px;
        border: 1px solid;
        zoom: 1; /* seems to fix drawing bug on border in IE 7 */
    }

    </style>

</head>
<body>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
</body>
</html>

Answer History

http://jsfiddle.net/3sK4S/

Works fine for me in IE9 Standards Mode. Does not display correctly (as you described) in quirks mode.

Testing with IE9:

Quirks mode: block (incorrect)
IE 7 Standards: block (incorrect)
IE 8 Standards: inline (correct)
IE 9 Standards: inline (correct)
IE 9 Compatibility Mode: inline (correct)

To trick IE7:

div {
    display: inline-block;
    *display: inline; /* leading asterisk IS correct */
    margin-right:40px;
    border: 1px solid;
}

Taken from this article. Works for me in IE 7 emulation mode.

Per @SKS comment about doctype, I have added a complete solution with a doctype specified.

That's an interesting thing to note. I didn't realise that it defaults to quirks mode... That's annoying. Is there a way to make it work in quirks mode? — AlanFoster, Jan 01 '12 at 05:58
@AlanFoster - The IE7 hack I posted seems to fix that too: http://jsfiddle.net/3sK4S/1/ — Tim M., Jan 01 '12 at 06:03
@AlanFoster You can use the `` meta in your header to make IE run using the highest rendering engine available, rather than resorting to compatibility mode, etc. Though IE7 still behaves in the manner you're seeing now, so you'll probably still want to have this hack in place. — justisb, Jan 01 '12 at 06:21

Selvakumar Arumugam · Accepted Answer · 2012-01-01T06:25:02.467

13

Add DOCTYPE to your html,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It works for me after I added this.

Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.

Edit 1: Check this for more information,

Edit 2: You can read more about inline-block styling here

edited Jan 01 '12 at 06:25

answered Jan 01 '12 at 06:00

Selvakumar Arumugam

79,297
15
120
134

1

IE7 does not support `display: inline-block` on elements that are block-level by default, which I'm pretty sure is regardless of the doctype declared? – justisb Jan 01 '12 at 06:18
You can use hasLayout property to make it work in IE 7. I will edit my post with more info. – Selvakumar Arumugam Jan 01 '12 at 06:22

score 5 · Answer 3 · answered Oct 12 '15 at 06:04

5

For me worked adding this code:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

to header information.

answered Oct 12 '15 at 06:04

maycza

51
1
2

only this works for me when in IE compatibility mode. – iamcoming Nov 14 '18 at 21:47

score 3 · Answer 4 · answered May 14 '13 at 16:58

There are CSS hacks for IE that does work, but there's quite a few of them:

hasLayout
```
hasLayout: true;
```
--- Apparently forces IE7(?) rendering to follow CSS layout rules for the element instead of global rules
*display
```
*display: inline;
zoom: 1;
```
-- The star hack, which apparently "tricks" rendering engine to line up the divs as inline elements
float
```
float:left;
```
-- Good old float, even IE6 should support it, but I don't know why you should be worried about IE6 although Chinese browser statistics seem to indicate that IE6 is still pretty popular in China, yet that could be already history as I read it some time last year. Personally, I think North Korea shouldn't be a worry, but that's just me.

However, there seems another way to avoid all those hacks in favour of a google online code project called HTML Shim, or Shiv. The purpose of including it is to make all IE versions before v9 to support HTML5. I noticed that it helps and I don't have to use all of the above to get inline-block to work. This is only valid if you don't mind adding some JavaScript. On the other hand, who does without JS these days?

Of course, there's also the quirks mode (compatibility) or standard modes, so take care to add a valid doctype to start with. For HTML5, it's simpler:

<?DOCTYPE html>

(?) Not sure about which version, but I think I read 7 in quirks mode.

score 0 · Answer 5 · edited Jan 01 '12 at 06:11

0

div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

The problem is only with IE7 or earlier, but this will fix that.

edited Jan 01 '12 at 06:11

Purag

16,941
4
54
75

answered Jan 01 '12 at 05:59

Rajat Singhal

11,234
5
38
56

This is a legitimate solution, but there are times when you don't want to float elements. Support for `inline-block` has made developing CSS layouts much easier. – Tim M. Jan 01 '12 at 06:21
Yeah..but when browsers like IE7 come one has to do such stuff...though honestly speaking my company doesn't check for ie<8.. – Rajat Singhal Jan 01 '12 at 06:30

score -1 · Answer 6 · edited Apr 02 '12 at 12:02

-1

display: inline;

and

zoom: 1;

worked fine

edited Apr 02 '12 at 12:02

dldnh

8,923
3
40
52

answered Apr 02 '12 at 11:57

Serkan

1

IE CSS display: inline-block Rendering issue

6 Answers6

Linked