IE hack

IEの特定のバージョンのみ表示がおかしい場合、そのバージョンにだけスタイルを適用させたいことがあります。その場合に下記を参考にしていただければと思います。

IE6以下に適用させるハック

アンダースコアハック (Underscore hack)

プロパティの前に「_」をつけます。

.ie6_hack1 {_color: #c00;}

スターHTMLハック (Star HTML hack)

セレクタの前に「* html」をつけることで、IE4～6にて適用されます。

* html .ie6_hack2 {color: #c00;}

Internet ExplorerのF12 開発者ツールからドキュメントモードを6以下にすると、下記のテキストが赤字で表示されます。
「IE6 以下で適用されているテキストサンプル(アンダースコアハック)」
「IE4～6で適用されているテキストサンプル(スターHTMLハック)」

IE6以外に適用させるハック

チャイルドセレクターハック (Child selector hack)

セレクタの前に「html > body」をつけます。ただし、Firefox, Chromeなどにも適用されます。

html>body .ie6_hack3 {color: #c00;}

Internet ExplorerのF12 開発者ツールからドキュメントモードを6以外にすると、下記のテキストが赤字で表示されます。
「IE6以外で適用されているテキストサンプル(チャイルドセレクターハック)」

IE7のみに適用させるハック

スタープラスハック (Star plus hack)

プロパティの前に「*:first-child+html」をつけます。

*:first-child+html .ie7_hack1 {color: #c00;}

Internet ExplorerのF12 開発者ツールからドキュメントモードを7にすると、下記のテキストが赤字で表示されます。
「IE7で適用されているテキストサンプル(スタープラスハック)」

IE7以下に適用させるハック

アスタリスクハック (Asterisk hack)

プロパティの前に「*」をつけます。「/」でも同じように機能します。

.ie7_hack2 {*color: #c00;}

Internet ExplorerのF12 開発者ツールからドキュメントモードを7にすると、下記のテキストが赤字で表示されます。
「IE7以下で適用されているテキストサンプル(アスタリスクハック)」

IE7以降に適用させるハック

インポータントクォークス (!important quirks)

IE7以降は「!important」と指定されているものを適用させますが、IE6は「!important」を無視して後のプロパティを優先させます。Firefox, Chromeも適用されます。

.ie7_hack3 {color: #c00 !important; color: #333}

Internet ExplorerのF12 開発者ツールからドキュメントモードを7以降にすると、下記のテキストが赤字で表示されます。
「IE7以降で適用されているテキストサンプル(インポータントクォークス)」

IE8以降に適用させる(IE7以下に適用させない)ハック

¥9ハック (¥9 hack)

セレクタの前に「html>/**/body」を、値の後に「¥9」をつけます。

html>/**/body .ie8_hack1 {color: #c00\9;}

Internet ExplorerのF12 開発者ツールからドキュメントモードを8以降にすると、下記のテキストが赤字で表示されます。
「IE8以降で適用されているテキストサンプル(¥9ハック)」

IE9以降に適用させる(IE8以下に適用させない)ハック

ノットターゲットハック (Not Target hack)

プロパティの後に「:not(:target)」をつけます。ただし、これはFirefox, Chromeなどにも適用されます。

.ie9_hack1:not(:target) {color: #c00;}

ルートセレクタハック (:root Selector hack)

セレクタの前に「:root」をつけます。ただし、これはFirefoxなどにも適用されます。

:root .ie9_hack2 {color: #c00;}
}

Internet ExplorerのF12 開発者ツールからドキュメントモードを9以降にすると、下記のテキストが赤字で表示されます。
「IE9以降で適用されているテキストサンプル(ノットターゲットハック)」
「IE9以降で適用されているテキストサンプル(ルートセレクタハック)」

IE9以下に適用させるハック

コンディショナルコメント (Conditional Comments)

<style>タグの前後に、「<!--[if IE ]>」「<![endif]-->」で囲んで使用します。
もともとはIEのみ適用させるものでしたが、IE10以降ではこれが適用されなくなったため、逆にIE9以下のInternet Explorerに適用させることができます。

<!--[if IE ]>
<style type="text/css"> .ie10_hack2 {color: #c00;} </style>
<![endif]-->

Internet ExplorerのF12 開発者ツールからドキュメントモードを9以下にすると、下記のテキストが赤字で表示されます。
「IE9以下で適用されているテキストサンプル(コンディショナルコメント)」

IE10以降に適用させる(IE9以下に適用させない)ハック

アットメディア エムエスハイコントラストハック (@media -ms-high-contrast hack)

セレクタを「@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)」で囲います。
Firefoxには適用されません。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.ie10_hack1 {color: #c00;}
}

Internet ExplorerのF12 開発者ツールからドキュメントモードを10以降にすると、下記のテキストが赤字で表示されます。
「IE10以降で適用されているテキストサンプル(アットメディア エムエスハイコントラストハック)」

最近の傾向

「IE以外に適用される」とされていたハックがIE9, 10になって適用されるようになっています。