I’ve been using this method for cross browser inline-block displays for a while and thought everyone else knew about it too. One of my co-workers was shocked to find out they had been doing it wrong for so long. So I thought I would share it in case someone else didn’t know about it.

Inline-block is very powerful. It is very useful for horizontal lists and even makes vertical alignment work properly. Unfortunately, it’s supported pretty poorly. *cough*Internet Explorer*cough*

Older versions of Firefox support inline-block with a special “-moz” tag. But not the one you think. It uses ‘-moz-inline-stack’ instead of ‘-moz-inline-block’. And when I say older versions I mean anything before version 4 I believe. So really, you don’t have to add it if you don’t want to. I don’t. But if you keep it, make sure ‘display:-moz-inline-stack’ comes BEFORE ‘display:inline-block’ so newer versions of Firefox can use the standard style.

IE supports inline-block, but only for elements that are natively inline, such as span and strong. When ‘zoom: 1′ is set, it triggers hasLayout and magically IE supports inline-block. The *property is an IE hack that does not get run for non-IE browsers.

So, without further adieus, cross-browser inline-block support:

.myStyle {
	display: -moz-inline-stack;  /* optional */
	display: inline-block;
	zoom: 1;  /* triggers hasLayout for IE */
	*display: inline;  /* target IE7 only */
}