CSSハック（IE6、IE7での表示崩れ対策）

PCのブラウザを対象にサイトをCSSでデザインするときにInternet Explorerとそれ以外のブラウザのFirefoxやOperaなどでは大きくデザインが異なることがあります。FirefoxやOperaはInternet ExplorerよりもCSSの解釈が規定に忠実なことがほとんどなのでデザインの崩れがあった場合Internet Explorerに対策を施すことでより多くのブラウザで同じ見栄えを得ることが可能です。

Internet Explorer対策として別のスタイルシートのファイルを読み込む場合と同じファイル内で対応する場合があります。

条件付きコメント

条件付きコメントは、ページの HTML ソース内のコメントのブロックであり、Windows Internet Explorer によってのみ解釈されます。Internet Explorer 7にのみ読み込ませたいCSSファイルがある場合は以下のようにHTML内に記述する。

<head>
   <title>Test Page</title>
   <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="/stylesheets/ie.css" />
   <![endif]-->
</head>

はWindows Internet ExplorerのIE 7（特定のバージョン）しか読み込まないことを利用している。演算子との組み合わせで複数のWindows Internet Explorerのバージョンを指定することも可能です。

ただしはWindows Internet ExplorerとあるようにはWindows版のInternet Explorerにしか対応しないようです。（Mac版Internet Explorerは5までしかないので特に気にする必要はないかもしれません）また、HTML内に特定のブラウザ向けの記述がされてしまうのでHTMLとCSSによる文章構造とデザイン分離という点で少しよくないような印象を受けます。

CSSハック

Internet Explorer独自仕様やバグを利用してブラウザ個別に対応する「CSSハック」はいろいろな方が様々なアプローチで発見されたものがあります。

Internet Explorer 6とInternet Explorer 7に対する「CSSハック」でW3C CSS validatorでエラーにならないものを各1つずつ掲載します。

Internet Explorer 6対応

セレクタの前に* htmlをつける（*とhtmlの間は半角スペースを入れる）


		<p class="ie">文字色はInternet Explorer 6は青7は赤です。</p>

		* html .ie{

			color:#0000ff;

		}

文字色はInternet Explorer 6は青7は赤です。。

Internet Explorer 7とInternet Explorer 8は、DOCTYPE宣言で標準モードと解釈されると（本サイトの推奨するhtml4.01strictは標準モードと解釈されます。）、このハックは適用されません。

Internet Explorer 7(標準モード)対応

セレクタの前に*:first-child+htmlをつける


		<p class="ie">文字色はInternet Explorer 6は青7は赤です。</p>

		* html .ie{

			color:#0000ff;

		}

		*:first-child+html .ie{

			color:#ff0000;

		}

文字色はInternet Explorer 6は青7は赤です。

Internet Explorer 7でも標準モードでないとこのハックは適用されませんので注意が必要です。

html4.01strictでHTMLを作成し必要なところにこの2つのハックを適用することでIE独自の表示の崩れを補正することができます。そしてW3C CSS validatorでPassedを獲得できます。