CSS: inline-block for IE7

I was developing a DemoSite and have problem with IE7 (actually we’re only target IE8, but one of our module must run in IE8 emulate IE7 mode so a meta tag <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> is put in the header). While Firefox is my primary browser and it’s OK with display: inline-block CSS style, BUT IE7 (and IE8EmulateIE7) does not render it.

So this is the hack for IE7 (from http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/):

HTML

<div class="predefinedList">
<div class="predefinedListItem">Cross country skiing</div>
<div class="predefinedListItem">Fine cuisine</div>
<div class="predefinedListItem">Spa</div>
</div>

Put your style settings to the top,
put display: inline-block;zoom:1;*display:inline; to the bottom.

CSS

.predefinedList .predefinedListItem {    padding:0;    /* other the styles should be here */
    display:inline-block;   /* for firefox */
    zoom: 1;    /* for IE7 hack */
    *display:inline;   /* for IE7 hack */
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s