How to achieve cross-browser support for inline-block

The CSS display property can be the bane of the web designer’s life as support varies from browser to browser, making it all a bit more complicated than it should be. In this article I will show a quick and simple way to get the display:inline-block declaration rendering consistently across all major browsers.

Quirksmode offers a very useful summary of browser support for the display property. As you’d expect, Internet Explorer is the main cause of problems as support for the inline-block value is ‘incomplete’ (read ‘flakey’). Surprisingly, Firefox 2 also causes unexpected problems as the value is not supported at all.

Firefox 2

I know most Firefox users actively upgrade and so started using Firefox 3 long ago (which supports inline-block with no issues at all). However, that’s what makes this little problem all the more difficult to spot as chances are you don’t have Firefox 2 lying around for testing any more?

Whilst Firefox 2 doesn’t support inline-block, what it does support is the Mozilla specific -moz-inline-box value – which to you and me and all our end users is exactly the same. So this is easy to fix.

#mydiv .myclass {
display: -moz-inline-box;
display: inline-block;
}

Internet Explorer

Back to our friend Internet Explorer and we need to add another couple of lines to our CSS to get this working in both IE6 and IE7. By combining a couple of IE version-specific filters with a display:inline declaration after we have made our display:inline-block declaration, Internet Explorer starts behaving itself.

* html .myclass { display:inline; }  /* for IE 6 */
* + html .myclass { display:inline; }  /* for IE 7 */

Honestly, I have know idea why this works. I’m sure some greater CSS brains than mine out there know exactly what is going on, but for me this doesn’t make sense and is confusing. But… it works, which is good enough.

So when we round all this together we have a snippet of CSS that should look vaguely like this:

.myclass {
display: -moz-inline-box;
display: inline-block;
}
* html .myclass { display:inline; }  /* for IE 6 */
* + html .myclass { display:inline; }  /* for IE 7 */

And there we have it – cross browser support for display:inline-block. Hopefully this tip will save you countless hours of hair-pulling frustration.