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

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

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を含みます。

CSS内でIEにのみ適用するスタイルを記述する方法

IE6以下の対応

p{
_color : red;
}

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

IE7以下の対応

p{
*color : red;
}

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

IE8以下の対応

p{
color : red\9;
}

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

あとがき

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

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