Cross Browser Inline-block

Inline-block is a great state to have an element’s display set at. It gives you the best of both inline and block elements: the ability to add padding, margins, while remaining inline with content around it. So why is it so badly supported? Firefox 3+, Safari and Opera have no problem with it, but what about Internet Explorer and Firefox 2?

Here is all you should have to have to use inline-block… if it was supporting by all browsers. Unfortunately, this will only work for Firefox 3+, Safari, and Opera.

1
2
3

#div {
  display:inline-block;
}

In versions of Firefox before 3, elements with inline-block defined as their display state would default back to their naitive state. To counter this, we use a Vendor Specific Extension -moz-inline-box. Yes, you’d think -moz-inline-block would make more sense, but that property doesn’t exist. :?

1
2
3
4

#div {
  display:-moz-inline-box;
  display:inline-block;
}

If the browser does not support -moz-inline-box, then it uses inline-block, and vice verca. It’s an annoying thing to have to do, and unexpected that it’s for Firefox, but it get’s the job done.

So now that only leaves Internet Explorer. Ah, Internet Explorer. The browser that likes to give us that extra work we love doing…. Inline-block for Internet Explorer is a little more tricky. If an element is inline natively, then it can be declared using inline-block, simply as that. However, if it’s anything other than inline, then you have make the element’s hasLayout attribute set to true. If you’re confused about what hasLayout is, I suggest reading hasLayout: What is is, and how to use it.

In this case, we’ll use zoom to set hasLayout to true, and then set display as inline.

1
2
3
4
5
6

#div {
  display:-moz-inline-box;
  display:inline-block;
  zoom:1;
  *display:inline;
}

And there you have it. This will work in IE 5+, Firefox, Safari, and Opera.