IEのCSSバグにハックを使わずに条件付コメントを使う

Posted: 2009.7.23

Firefoxでコーディングしてて思い通りにさくさく進んでいるときに、ちらっとIE6でチェックしたらずれている…

なんてことはよくあることです。
これまで僕はハックを使って対処してきたのですが、「条件付コメント」を使うという手があるそうで、いろいろ調べてみました。

条件付きコメントとは、HTMLのコメント用タグのなかに条件を入れて、ブラウザごとにCSSを振りわけたりできる優れものです。
主にIE用の振り分けが可能なのですが、

<!--[if IE 6 ]>
ここにIE6だけで表示させたい内容を入れる
<![endif]-->

こうするとIE6だけに、内容が反映されるそうです。
注意としてIEと6の間に半角を入れないと反映されませんでした。

他にもいろいろバリエーションがあるようで覚え書きとして以下に羅列しておきます。

■IE全部に適用

<!--[if IE]>
ここにIEだけで表示させたい内容を入れる
<![endif]-->

■IE5以上を対象にする場合

<!--[if gte IE 5]>
ここにIE5以上だけで表示させたい内容を入れる
<![endif]-->

※IE6とすればIE6以上に適用されます

■IE6以下を対象にする場合

<!--[if lte IE 5]>
ここにIE6以下だけで表示させたい内容を入れる
<![endif]-->

■指定したバージョンを除く場合

<!--[if !IE 6]>
ここにIE6以外だけで表示させたい内容を入れる
<![endif]-->

■全てのIEを対象外にする場合

<![if !IE]>
ここにIE以外のブラウザで表示させたい内容を入れる
<![endif]>

※コメントの書き方が変わりますので注意が必要です。
<!-- → <!
--> → >

この条件コメントを使ってスタイルシートを切り替える例(IE6には別のスタイルシートを読ませる)

まず普通に全てのブラウザにスタイルシートを適用させます。

<link rel=”stylesheet” type=”text/css” href=”common.css”>

そのしたにIE6ようのスタイルシートを条件付コメントで記入します。

<!--[if lte IE 6 ]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css”>
<![endif]-->

こうすることでスタイルシートの振り分けが可能になります。
このやりかただとW3Cのバリデーターにも引っかからないので、ハックを使うよりは良いと思います。