[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法

IEの各バージョンを分岐させるvalidなスタイルシートを紹介します。

デモのキャプチャ

CSS Specific for Internet Explorer
デモページ(※IE7で表示)

デモ紹介

デモページは、下記のように設定されています。

スタンダードブラウザ(IE9, Firefox, Chrome, Safari, Operaなど)
背景色がグレー
IE8
背景色がピンク
IE7 or IE8互換モード
背景色がグリーン
IE6
背景色がブルー

下記はデモページをIETesterで表示したものです。
IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。

デモのキャプチャ

デモページ(※IE6で表示)

デモのキャプチャ

デモページ(※IE7で表示)

デモのキャプチャ

デモページ(※IE8で表示)

IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。

1. 条件付きコメントの利用

IE6, 7, 8のバグ対策として、最も一般的に利用されているのが、この条件付きコメントでしょう。
基本的な書式は、下記のようになります。

<!--[if IE 8]>
IE8の場合
<!--[if lt IE 8]>
IE8未満の場合、IE7, IE6など
<!--[if gte IE 8]>
IE8以上の場合、IE8, IE9など

2. CSS Hackの利用

もう一つの方法が、IEで読み込まれないCSSの記述を使用するCSS Hackです。しかし、この方法はvalidなスタイルシートではないため、基本的には使用を推奨しません。

IE8、またはそれ以下の場合
セミコロン(;)の前にバックスラッシュ(\)と数字の9を加えます。
IE7、またはそれ以下の場合
プロパティの前にアスタリスク(*)を加えます。
IE6の場合
プロパティの前にアンダースコア(_)を加えます。
.box {
	background: gray; /* standard */
	background: pink\9; /* IE 8 and below */
	*background: green; /* IE 7 and below */
	_background: blue; /* IE 6 */
}

3. 条件付きのHTML class

これが、デモページで使用されている方法です。

条件付きコメントを使用し、<html>にクラスを与えます。これは巧い方法で、且つvalidエラーもありません。

<!--&#91;if lt IE 7 &#93;> <html class="ie6"> <!&#91;endif&#93;-->
<!--&#91;if IE 7 &#93;> <html class="ie7"> <!&#91;endif&#93;-->
<!--&#91;if IE 8 &#93;> <html class="ie8"> <!&#91;endif&#93;-->
<!--&#91;if IE 9 &#93;> <html class="ie9"> <!&#91;endif&#93;-->
<!--&#91;if (gt IE 9)|!(IE)&#93;><!--> <html> <!--<!&#91;endif&#93;-->

ページに利用する時は、それぞれのclassを利用して、スタイルシートを記述します。

top of page

©2017 coliss