No space between inline-block elements in IE7

Question

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 divs:

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

How could I make sure that IE7 has this space?

Answer 1

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