CSS inline-block on IE6 and IE7

The CSS display property can be set to "inline-block":

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

This is useful for all sorts of stuff including displaying inline a row of images and captions in the same block , or as a container for a dropdown menu. But older browsers, notably Firefox 2 and Internet Explorer 6 and 7, do not support it. See the Mozilla Webdev blog for an explanation and fix.

In summary you can add "zoom:1; *display:inline" to trigger haslayout for IE  and exploit the "*" CSS hack to make the thing inline.

But if you look at Quirksmode's always helpful compatibility page, you'll see that "IE 6/7 accepts the value only on elements with a natural display: inline."

So if you are not worried about Firefox 2 (anyone still using that? why?)  you can simply make the inline-block container a span instead of a div and not worry about any hacks for Internet Explorer.

The trouble with hacks is you can never be sure they are proof against future browser releases.