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)

This is how it looks in IE

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

回答1:

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

回答2:

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.

回答3:

For me worked adding this code:

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

to header information.

回答4:

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.

回答5:

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

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

回答6:

display: inline;

and

zoom: 1;

worked fine

来源：https://stackoverflow.com/questions/8692021/ie-css-display-inline-block-rendering-issue

标签

html

css

internet-explorer

rendering