Skip to main content

“inline-block” and you

Published on

This article gives a brief overview of the inline-block value of the CSS display property. Many people still seem to think that browser support for this display type is dissatisfactory and that Internet Explorer 7 and below do not support it at all — which is blatantly untrue.

The real culprit

Indeed, Internet Explorer has supported inline-blocks since version 5.5. Firefox however, did not support them until version 3.0. In earlier editions of the browser, one could make use of some of Gecko's proprietary CSS extensions to achieve a similar (but not necessarily equal) effect. Luckily, the marketshare or Firefox 2 has declined rapidly over the past year and most of us can forget about fully supporting it now.

Technicalities

While Internet Explorer may indeed support the inline-block value, making use of it is usually not quite as straight-forward as simply declaring it in your CSS. Then again, things are never as easy as they should be with Microsoft, so I guess most of us are used to that :-).

It should be noted that applying display: inline-block to an element, is one of several ways to “activate” hasLayout. Furthermore, it appears that this hasLayout is actually responsible for making an element behave as an inline-block. From that follows, that we can indeed also use any method other than display: inline-block to give an element layout (refer to the hasLayout article I just linked to), and it will still appear to behave as an inline-block. However, in practice, there is generally very little reason to use a different method.

Actually, the above paragraph is only true for elements that are inline. When you want to make a block-level element behave as an inline-block, you'll have to additionally make it inline after giving it layout. A simple example is shown below:

div#foo {
  display : inline-block; /* This is enough for modern browsers, and gives layout in IE6/7 */
}

div#foo {
  display : inline; /* This overrides the element to be inline, but hasLayout cannot be taken away once given! */
}

Of course, feeding the above code to a compliant browser would actually make the element inline, so we can't do that — we'll have to hide that last part from all browsers but IE 6 and 7. You could do this with IE conditional comments, or with (valid) in-CSS hacks. I prefer using the latter, as I generally only need very few IE-only rules and don't like to waste an extra HTTP request on what would be a very small IE-only style sheet. Using in-CSS hacks, the previous code example would look as follows if we wanted to support both IE 6 and 7:

div#foo {
  display : inline-block;
}

* html div#foo { /* for IE6 */
  display : inline;
}

*+html div#foo { /* for IE7 */
  display : inline;
}

So, as you can see, it isn't all that difficult to get it to work in IE. Sure, the code looks a bit convoluted, but inline-blocks can be very powerful and immensely useful — well worth the bother!

And that, as they say, is that. Bookmark and Share

Comments

blog comments powered by Disqus