IEのバージョン毎のハックを試してみる

最近はIEの古いバージョンへの対応はなくなってきていますが、たまに使う機会があるので、改めてIEのバージョン毎のハック方法を調べてみました。

想定しているのはIE6～11で、確認はIEの開発者ツールとIE Testerで行っています。

IE6のみ対応

プロパティの前に_を付けます。

HTML

<div class="sample">サンプル</div>

CSS

.sample {
	background: #cccccc;
	_background: #ff0000; /* IE6 */
}

IE6対応のデモページ
　

IE7のみ対応

プロパティの前に*を付けることでIE7以下に効くので、その後でIE6のみ上書きします。

CSS

.sample {
	background: #cccccc;
	*background: #ff0000; /* IE7以下 */
	_background: #cccccc; /* IE6 */
}

IE7対応のデモページ
　

IE8のみ対応

値の最後に\9を付けるとIE8以下で効くという記事を見かけるのですが、実際にはIE10以下で効くようです。
そのため、\9を付けた後でIE7以下とIE9,10を上書きします。

CSS

.sample {
	background: #cccccc;
	background: #ff0000\9; /* IE10以下 */
	*background: #cccccc; /* IE7以下 */
}
.sample:not(:target) {
  background-color: #cccccc\9; /* IE9,10 */
}

6～8行目は:not(:target)がIE9以上、\9がIE10以下に効くので、結果IE9,10のみに効くようになります。
IE8対応のデモページ
　

IE9のみ対応

IE8対応でも使った:not(:target)と\9でIE9,10のみ効くようにして、その後でIE10以上に効く@media all and (-ms-high-contrast: none) { ～ }で上書きします。
このとき、IE10以上の方にも:not(:target)を付けないとIE9,10対応の方が優先されてしまうので注意して下さい。

CSS

.sample {
	background: #cccccc;
}
.sample:not(:target) {
  background-color: #ff0000\9; /* IE9,10 */
}
@media all and (-ms-high-contrast: none) {
	.sample:not(:target) {
		background: #cccccc; /* IE10以上 */
	}
}

IE9対応のデモページ
　

IE10のみ対応

IE10以上に効く@media all and (-ms-high-contrast: none) { ～ }とIE10以下に効く\9を使うことで対応できます。

CSS

.sample {
	background: #cccccc;
}
@media all and (-ms-high-contrast: none) {
	.sample {
	  background-color: #ff0000\9; /* IE10 */
	}
}

IE10対応のデモページ
　

IE11のみ対応

@media all and (-ms-high-contrast: none) { ～ }でIE10以上に効くようにして、その後で\9でIE10以下を上書きします。

CSS

.sample {
	background: #cccccc;
}
@media all and (-ms-high-contrast: none) {
	.sample {
		background: #ff0000; /* IE10以上 */
	}
}
.sample {
  background-color: #cccccc\9; /* IE10以下 */
}

IE11対応のデモページ
　

IEのバージョン毎の対応は、以前に条件付きコメントの使い方もまとめています。
よければ合わせてご確認ください。
条件付きコメントでIEのバージョンごとにCSSを変更する
　

【参考サイト】

• IE用CSSハックの簡単な書き方とIE10以上への対応 | web codery
• CSSハック – Web覚
• CSS IE10・IE11でずれる・おかしい・表示しない等バグ発生時の対処法 CSSハック : WEB情報ブログ | POROA