TEST-SAMPLE ROOM

[CSS]ie6対策（ハック）まとめ

■大前提

大前提として、IE6 は標準準拠モードにします。

* DOCTYPE 宣言（URL 表記を含む）を省略しない。
* XHTML の場合、XML 宣言は省略する。

■CSS レイアウト時の注意

以下の 5 点に気をつければ、IE6 でも概ね正常にレイアウトできます。

* よく使う要素は「zoom:1;」をデフォルトで指定して hasLayout の値を true にしておく。
　→hasLayout が false であることによって発生する IE 固有のバグのほとんどがこれで回避できます。
* float する要素には「display:inline;」をセットで記述。
　→float した要素の margin が 2 倍になる、という有名なバグが回避できます。
* float する div 要素と、全体を囲む div 要素には width を指定する。
　→なんかカラム落ちする～ という時はこれで一発解決することが多いです。
* 画像に変な隙間ができる、と思ったら対象の img 要素に「vertical-align:bottom;」。
　→画像周辺の変な隙間がなくなることが多いです。
* よくわからないけど、何故か表示が崩れる場合は、とりあえず怪しい要素に「position:relative;」を指定してみる。
　→なんかよくわからないけど直った！ というケースがちょくちょくあります。

追記

* （IE6の）フロートさせたカラム落ちを強制的に防ぐ為に「overflow: hidden; 」を記述（「zoom:1;」もセット）
　→なんかカラム落ちする～ という時はこれで一発解決することが多いです。

■ieハック

・IE全般

color: red; /* 全てのブラウザ */
color : green\9; /* IE8 とそれ以下のバージョンに対応 */
*color : yellow; /* IE7 とそれ以下のバージョンに対応 */
_color : orange; /* IE6　に対応 */

・IE6以下（アンダースコア・スターハック）

header { _color: blue; }
* html #header  { color: red; }

・IE6以下（インポータントハック）

IE 6に適用します。使用方法は、IE 6に適用させたいスタイルを下に書き、適用させたくないスタイルを上に書き「!important」を追記します。 　通常CSSは、後に記述したものを優先的に読み込みます。しかし、IE 7やモダンブラウザは後に記述されたものよりも「!important」と指定されているものを適用させます。それに比べIE 6は、「!important」を無視し、後に記述されているものを優先させます。

p{
     color:#000 !important; /* 通常 */
     color:#fff; /* IE 6以下 */
}

・IE7

*:first-child+html #header { color: red; } 
*+html #header {  color: red; }

・IE6, IE7

#header { /color: blue; }

・IE8

#header { color: blue\9; }

・IE7, IE8

#header { color/*\**/: blue\9; }

・IE6以外

#header { color/**/: blue; }

・IE6, IE7以外

html>/**/body #header { color: red; }

・IE6〜IE8以外

:root *> #header { color: red;  }

■モダンブラウザ

・こちらを参考にgoogle

タグ検索