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;
}
         


        

Answer 1

Working Solution

The following appears to work correctly in:

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

---

    



    
element
    
element
    
element
    
element
    
element

---

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.