IEのバージョン毎に異なるスタイルを適用するための小技まとめ

ちょいちょい忘れるので、メモとして残しておきます。

IEのバージョン毎に異なるスタイルを適用する方法のまとめです。

IEに異なるスタイルシートを適用する方法

IEのみ異なるスタイルシートを適用するには、HTMLのヘッダーに以下のような記述をします。


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

このように記述することで、IEのみstyle-ie.cssが適用されます。

逆に以下のようにすれば、IE以外にのみstyle.cssが適用されます。


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

例えば、IE7なら以下のように記述します。


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

7のところを変えれば、他のバージョンにのみ適用できます。

IE5.5はちょっと特殊で、以下のように記述します。


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

以下のように記述すると、IE7未満、つまりIE6以下のバージョンにのみstyle-ie.cssが適用されます。


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

ltは、Less Thanの略なので、IE7は含みません。

以下のように記述すると、IE7を含みます。


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

lteは、Less Than Equalの略なので、IE7以下にstyle-ie.cssが適用されます。

以下のように記述すると、IE7以上にstyle-ie.cssが適用されます。


<!--[if gt IE 6]>
 <link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

gtはGreater Thanの略なので、IE6は含みません。

以下のようにすると、IE6以上にstyle-ie.cssが適用されます。


<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

gteはGreater Than Equalの略なので、IE6を含みます。


p{
_color : red;
}

プロパティの先頭にアンダーバー(_)を入れることで、IE6以下にのみ適用されます。


p{
*color : red;
}

プロパティの先頭にアスタリスク(*)を入れることで、IE7以下にのみ適用されます。


p{
color : red\9;
}

値の後ろに\9と入れることで、IE8以下のバージョンに適用されます。

特にIE7以下は曲者なので、苦しめられているWEB製作者も多いのではないでしょうか。

これらの小技を覚えておくと役立つかと思いますので、ぜひ参考にしてください。