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.
– Tim M.

2012-01-01 05:54:19 +00:00
Commented Jan 1, 2012 at 5:54 — Tim M.
– Tim M., Commented Jan 1, 2012 at 5:54

Tim M. · Accepted Answer · 2012-01-01 06:20:08Z

15

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.

edited Jan 1, 2012 at 6:20

answered Jan 1, 2012 at 5:56

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlanFoster Over a year ago

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?

Tim M. Over a year ago

@AlanFoster - The IE7 hack I posted seems to fix that too: jsfiddle.net/3sK4S/1

justisb Over a year ago

@AlanFoster You can use the <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 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.

Selvakumar Arumugam · Accepted Answer · 2012-01-01 06:25:02Z

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 1, 2012 at 6:25

answered Jan 1, 2012 at 6:00

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

2 Comments

justisb Over a year ago

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?

Selvakumar Arumugam Over a year ago

You can use hasLayout property to make it work in IE 7. I will edit my post with more info.

maycza · Accepted Answer · 2015-10-12 06:04:31Z

5

For me worked adding this code:

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

to header information.

answered Oct 12, 2015 at 6:04

maycza

511 silver badge2 bronze badges

1 Comment

iamcoming Over a year ago

only this works for me when in IE compatibility mode.

Shubhojoy Mitra · Accepted Answer · 2013-05-14 16:58:11Z

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.

Purag · Accepted Answer · 2012-01-01 06:11:39Z

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 1, 2012 at 6:11

Purag

17.1k4 gold badges57 silver badges78 bronze badges

answered Jan 1, 2012 at 5:59

Rajat Singhal

11.3k5 gold badges40 silver badges57 bronze badges

2 Comments

Tim M. Over a year ago

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.

Rajat Singhal Over a year ago

Yeah..but when browsers like IE7 come one has to do such stuff...though honestly speaking my company doesn't check for ie<8..

dldnh · Accepted Answer · 2012-04-02 12:02:57Z

-1

display: inline;

and

zoom: 1;

worked fine

edited Apr 2, 2012 at 12:02

dldnh

8,9613 gold badges43 silver badges55 bronze badges

answered Apr 2, 2012 at 11:57

Serkan

1

Collectives™ on Stack Overflow

IE CSS display: inline-block Rendering issue

6 Answers 6

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related