3/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About

「条件付きコメント」を使ってIEの問題を解決するには

「条件付きコメント」を活用して、IEのみに発生するスタイルシート解釈上の問題を解決するには、スタイルシートを2ファイルに分割します。

all.css　：　すべてのブラウザに適用するスタイル
ie.css 　：　IE用に上書きするスタイル

このようにスタイルシートを2つに分割し、ie.cssをIEにのみ読ませるようにすれば、スタイルシートのソースを分かりにくくすることなく、IEの問題を解決できます。

スタイルシートは、後の記述が採用される

スタイルシートでは、同一の装飾内容については、最後に記述された指定が採用される規則になっています。

例えば、all.cssの中に以下のようなスタイルの指定がある場合を考えます。

h1 { color: red; }

これは、h1要素（見出し）の文字色を赤色にする指定です。
ここで、ie.cssに以下のような記述があるとします。

h1 { color: blue; }

これは、h1要素の文字色を青色にする指定です。
all.cssを先に読み込み、後からie.cssを読み込んだ場合は、後の記述が採用されるため、h1要素の文字色は青色になります。

すべてのブラウザに all.css を読ませ、その後、IEだけに ie.css を読ませれば、「IE以外のブラウザでは見出しは赤色、IEでは見出しは青色」という装飾が実現できます。

この方法を使って、「IEのみで問題の発生する記述」を、「IEでうまく表示されるような記述」で上書きすることで、 IEとIE以外のどちらのブラウザでもうまく表示できるようにすれば良いのです。

「条件付きコメント」でIE用のスタイルを読ませる方法

条件付きコメントを使ってIEにのみ対策用スタイルを適用させるには、次のように記述します。

<link rel="stylesheet" type="text/css" href="all.css">

<!--[if IE ]>

<link rel="stylesheet" type="text/css" href="ie.css">

<![endif]-->

上記のソースを、HTMLのhead要素内（<head>～</head>の中）に記述すれば、 all.cssはすべてのブラウザで読まれ、ie.cssはIEのみで読まれるようになります。（※IEは all.css と ie.css の両方を読むことになります。）

もし、問題が「IE6以下」でのみ発生するのであれば、「IE6以下のみに適用させるスタイルシート」（例えば、ie6.css）を用意しておき、以下のように記述します。

<link rel="stylesheet" type="text/css" href="all.css">

<!--[if lte IE 6 ]>

<link rel="stylesheet" type="text/css" href="ie6.css">

<![endif]-->

上記のソースだと、ie6.css は、IE6以下にしか適用されません。
※IE6以下に適用されるとはいえ、IE4以下には適用されません。なぜなら、条件付きコメントはIE4以下ではサポートされていないからです。ただ、そもそもIE4以下はまともにスタイルシートに対応していない上、もはや利用者は少ないと考えられるので気にする必要はないでしょう。