Once in a while you’re forced to support Internet Explorer 7. Even though its share is only 1.29% for the site I’m currently working on, the amount of visitors is so vast that even that small percentage accounts for hundreds of thousands of pageviews per month. Which means we can’t just yet afford to drop support.

One problem I kept encountering was that of using display: inline-block. In all modern browsers this is supported, and often it’s a lot more useful than using floats. The problem once again though is IE7′s support for it.

For some reason inline-block only works in IE7 when the element has a native display value of inline (like <a>, <span> and <strong>).

What does work however is forcing the mysterious hasLayout property on the element by using a CSS property that invokes this effect. The most commonly used one is zoom: 1, which doesn’t change anything to the element except force it to get hasLayout.

Finally, to make the element appear like an inline-block in IE7 force it to display: inline (and the hasLayout property will do the rest of the work).

One way to target only IE7 is to prepend a CSS rule with an asterisk (it’s the only browser that will accept this property, all the others will ignore it.

So your code will become:

.my-inline-block {
	display: inline-block;
	zoom: 1;
	*display: inline;
}

Of course, if you use the HTML5 Boilerplate you will already have a way to target IE7 specifically:

.lt-ie7 .my-inline-block {
	display: inline;
	zoom: 1;
}