[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
Post on:2011年2月28日
sponsors
IEの各バージョンを分岐させるvalidなスタイルシートを紹介します。
CSS Specific for Internet Explorer
デモページ（※IE7で表示）
[ad#ad-2]
デモ紹介
デモページは、下記のように設定されています。
- スタンダードブラウザ（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エラーもありません。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
ページに利用する時は、それぞれのclassを利用して、スタイルシートを記述します。
sponsors
