IE Hack: inline-block

I just decided that it would be a good idea to collect solutions to common IE css issues here on my blog. Sure, these are all over the web now a days, but hey, another place can’t hurt right? :)
I’m going to start posting them under the IE hacks category whenever I come across one.

This time it’s about the inline-block display property (introduced in CSS 2.1), which can be very useful in certain scenarios. The problem is that it is not supported IE <= 7 for elements that are block level by default.

Without further ado, here's the most simple solution I could find. Just append these two lines at the end of the CSS block where the inline-block style is set:

zoom: 1;
*display: inline;

Basically it triggers hasLayout for the target element, which is "kinda like magical fairy dust you can sprinkle on rendering issues and make them disappear".

Source: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Tags: , ,

3 Responses to “IE Hack: inline-block”

  1. العاب says:

    thank you i want -webkit-transform: rotate(-2deg) hack for ie
    thank you

  2. great thanks for information

Leave a Reply