IEのバージョン毎にスタイルを切り替える方法

IEの場合、ブラウザのメジャーバージョンによって、サイトの表示が大きく異なってしまう場合があります。そのような場合に、バージョン単位でスタイルを調整するための方法がいくつかあります。

■条件付きコメントの利用する方法

html中に条件付きコメントを利用することで、IEの各バージョン毎に命令を出すことができます。

?!–[if IE 9]>
/* IE9のみ適応 */
?![endif]–?

?!–[if IE 8]>
/* IE8のみ適応 */
?![endif]–?

?!–[if IE 7]>
/* IE7のみ適応 */
?![endif]–?

?!–[if lte IE 6]>
/* IE7以下に適応 */
?![endif]–?

条件付きコメントの文法は、wikipediaを参照してください。

■CSSハックを利用する方法

CSSにて、「\9*_」の4種類の文字を使って、バージョン毎に切り分けることができます。

body {
color : red; /* すべてに適応 */
color : green\9; /* IE8 または、それ以下 */
*color: yellow; /* IE7 または、それ以下 */
_color: orange; /* IE6 */
}

■User-Agentからプログラムで切り分ける方法

何の言語でもいいのですが、大抵の場合(WordPressのようなCMS含め)、ページを表示するのにプログラムが利用されていると思いますので、それを修正して利用します。

どのようにUser-Agentを取得するかは、各プログラム毎に違いがありますが、perlの場合は以下のような感じになるかと思います。
[perl]
# 擬似コードレベル
my $ua = $ENV{‘HTTP_USER_AGENT’};
my $css;
if ($ua =~ /MSIE 9/) {
$css = q{<link rel="stylesheet" type="text/css" href="<?= static_file_path(‘resource/css/ie9.css’) ?>">};
} elsif ($ua =~ /MSIE 8/) {
$css = q{<link rel="stylesheet" type="text/css" href="<?= static_file_path(‘resource/css/ie8.css’) ?>">};
} elsif ($ua =~ /MSIE 7/) {
$css = q{<link rel="stylesheet" type="text/css" href="<?= static_file_path(‘resource/css/ie7.css’) ?>">};
} else {
$css = q{<link rel="stylesheet" type="text/css" href="<?= static_file_path(‘resource/css/default.css’) ?>">};
}
print $css;
[/perl]

■cssuseragentを利用する方法

cssuseragentなるJavaScriptライブラリがあるようです。このライブラリを読み込むことで、アクセスしてきたブラウザのUser-Agentを判別し、自動でhtml class属性に、ブラウザ毎のクラス名を付加してくれるので、CSSでclass指定により、ブラウザ単位での切り替えが可能になるみたいです。

ダウンロードはこちらより。

■最後に

自分の場合、使用しているメインのブラウザがChromeで、他のブラウザで見た場合のレイアウトを疎かにしていました。

それで、IEで見たときのレイアウトやフォントがChromeと大きく異なっていることに気づき、クロスブラウザでの確認の必要性を再認識しました。

方法は他にもありますが、自分のサイトの環境に導入しやすい方法を取り入れればいいかと思います。

まぁ、IE6は捨てているんですけどね！

いい感じ！