Question

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}

Answer 1

The IE7 display: inline-block; hack is as follows:

display: inline-block;
*display: inline;
zoom: 1;

By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.

zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won’t apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.

This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->