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