要素を横並びにする時に便利な「display:inline-block;」ですが、IE6やIE7などの古いIEではうまく適用することができず、表示崩れが発生してしまいます。

そこで今回は、display:inline-block;を古いIEにも適用する簡単な方法を紹介したいと思います。

古いIE(IE7以下)でもdisplay:inline-block;を適用する方法

古いIEでもdisplay:inline-block;を適用するには、CSSを以下のように記述します。

.example{
 display: inline-block;
 *display: inline; 
 *zoom: 1;
}

このように記述することで、IE7以下ではインライン要素にしたうえで、zoom:1;でhaslayoutをtrueにします。

haslayoutというのは、要素が幅や高さなどのレイアウト情報を持っているかどうかを示す値で、デフォルトではfalseになっています。haslayoutがfalseだと、他の要素に影響されて要素が伸縮したりしてしまうので、結果レイアウトが崩れてしまう原因になってしまいます。

これを防ぐために、上記のようにhaslayoutをtrueにすることで、レイアウトが崩れないようにしているというわけです。

あとがき

いまいち理解できないかもしれませんが、「*display: inline;」と「*zoom: 1;」を追記してあげれば、古いIEでもdisplay:inline-block;が使える、と覚えておけばOKです。

今時IE7以下なんて・・・と思われるかもしれませんが、いざという時のために覚えておくと便利です。