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

サイト構築 -CSS

Post on:2011年2月28日

sponsorsr

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

CSS Specific for Internet Explorer
デモページ（※IE7で表示）

[ad#ad-2]

デモ紹介
1. 条件付きコメントの利用
2. CSS Hackの利用
3. 条件付きのHTML class

デモ紹介

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

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

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

デモページ（※IE6で表示）

デモページ（※IE7で表示）

デモページ（※IE8で表示）

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

[ad#ad-2]

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; /* 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を利用して、スタイルシートを記述します。