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.

6 responses

freepuke responded on with…

“Hopefully this tip will save you countless hours of hair-pulling frustration.”

Too bad that the IE6 implementation doesn’t work for me :-(. Keeps being block element in IE6 (and I don’t have problems with inline-blocks in IE7?).

Hes responded on with…

I found some other sites, with solutions for this problem, but this one worked best for me. Thanks.

Erik responded on with…

Thanks! This solution did it!

Even in IE8 they didn’t implent inline-block properly :-(

Oren Yomtov responded on with…

Here us another way to put it which I think is cleaner:

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

source: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

vmaksym responded on with…

And one more way ))) .class { display: -moz-inline-stack; display: inline-block; _overflow: hidden; zoom: 1; *display: inline; }

Iain responded on with…

Thanks for this, although I am dropping support for FF2 because I don’t think it’s necessary, as you say, most users of FF will upgrade, and it won’t validate.

Although Oren’s suggestion is cleaner it doesn’t validate, that’s important for me.

So all in all, I think you have the best solution originally.

Comments are closed

Responses for this article have now been disabled. You can still email me directly through the contact form.