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を変更する
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] 参考:IEのバージョン毎のハックを試してみる […]

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31