Misha Moroshko Misha Moroshko - 6 months ago 15
HTML Question

No space between inline-block elements in IE7

Consider the following code:

HTML:

<div>Hello</div>
<div>Stack</div>
<div>Overflow</div>


CSS:

div {
display: inline-block;
zoom: 1;
*display: inline;
background-color: #ccc;
}


In IE8, as well as in other modern browsers, there is a space between the
div
s:

enter image description here

However, in IE7, the
div
s are adjacent to each other. There is no space between them.

How could I make sure that IE7 has this space?

Answer

You can add the space yourself for only IE7 and lower:

div {
    display: inline-block;
    zoom: 1;
    *display: inline;
    *margin-right: 0.25em;
    background-color: #ccc;
}

Or like this:

div + div {
    *margin-left: 0.25em;
}