IE6/7 Support for display: inline-block

Setting elements to inline-block can be very useful. By the use of inline-block, there are many design and development issues that are much easier to solve.

The inline-block property affects an element by formatting the inside as a block box, while the element itself is formatted as an inline replaced element. (W3C)

Inline-block was fully supported by Internet Explorer (IE) in version eight, however, most of the world still uses older versions of IE. So, how do we emulate inline-block for IE6 and IE7?

The Code

It's very simple. Choose the element that you want to enable as inline-block and add the following css:

.block2 {
	display: inline;
	vertical-align: middle;
	zoom: 1;
}

That's all it takes to get the job done in IE6 and IE7. However, other browsers will still not display .block2 as an inine-block element, thus a little more code has to be added.

.block2 {
	display: inline-block;
	*display: inline;
	*vertical-align: middle;
	zoom: 1;
}

Alright! The standards declaration for inline-block and a few asterisks have been added to make all other browsers interpret the correct code. The asterisks are used to target Internet Explorer 7 and older versions. All other browser fail to recognize the syntax and move on.

The Proof

Now to prove it. The first example shows how an inline element displays inside a block element.

The second example shows the W3C standards method only, and shows the hackless result when viewed in IE6 and IE7.

The third example shows the result of display inline-block hack. You will notice no difference unless viewing with IE6 or IE7.

Note: I know that it doesn't make sense to make a span inline for IE6/7 like I did for the third example. Nevertheless, you must make natural block elements inline for this hack.

Reference: http://www.quirksmode.org/css/display.html, http://www.w3.org/TR/CSS21/visuren.html (W3C)