CODEWITHSUNDEEP
htmlcssinternet-explorerrendering
AlanFoster
AlanFoster

Reputation: 8306

IE CSS display: inline-block Rendering issue

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.

Upvotes: 18

Views: 35986

Answers (6)

maycza
maycza

Reputation: 51

For me worked adding this code:

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

to header information.

Upvotes: 5

Shubhojoy Mitra
Shubhojoy Mitra

Reputation: 21

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

  1. hasLayout

    hasLayout: true;

    --- Apparently forces IE7(?) rendering to follow CSS layout rules for the element instead of global rules

  2. *display

    *display: inline;
zoom: 1;

    -- The star hack, which apparently "tricks" rendering engine to line up the divs as inline elements

  3. 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.

Upvotes: 3

Serkan
Serkan

Reputation: 1

display: inline;

and

zoom: 1;

worked fine

Upvotes: -1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 13

Tim M.
Tim M.

Reputation: 54359

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.

Upvotes: 15

Rajat Singhal
Rajat Singhal

Reputation: 11264

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

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

Upvotes: 0

Related Questions