IE6, 7, 8対策
それぞれのブラウザで使えないcss
IE6
・チャイルドセレクタ使えない
・属性セレクタ
・隣接セレクタ
・間接セレクタ
・疑似クラス
・チェインクラス
・display:table-cell
IE7
・親と子の間にHTMLコメントがある場合、チャイルドセレクタは機能しない
・display:table-cell
IE8
・角丸のborder-radiusが使えない
・色と不透明度を同時に指定できるrgbaが使えない
・影をつけるbox-shadowとtext-shadowが使えない
・media max-width min-width が使えない
・:last-child が使えない
・:nth-child() が使えない
・擬似要素を::after(または::before)の書式で書けない
・擬似要素にz-indexがきかない
・擬似要素にfilterがきかない
有名なIE6,7のCSSのバグ
doctype宣言(IE6)
・doctype宣言の前に１バイトでも文字があるとCSSの解釈をバージョン６未満のIEに合わせるモード（後述：後方互換モード）に切り替わってしまう。（box-sizingプロパティをIEがサポートしたのはIE8からだから使用できなくなる。）
・テキストエディタによっては文書の先頭にByte order markと呼ばれる３バイトの情報を付加することがあり、これも後方互換モードの引き金になってしまう。
・html5の場合、標準的なdoctype宣言を書けば、IEは、CSSの解釈をW3Cが定めた仕様にあわせるモード、標準準拠モードで動作する。
hasLayout（IE6,7）
他の特定のプロパティを指定することで、間接的にオンの状態にすれば、だいたい直る。
*zoom:1;
floatとダブルマージン(IE6)
floatで指定したのと同じ方向にmarginを指定すると、
marginが指定した数値の倍の値になってしまうことをダブルマージンという。
display:inlineを追加するとこのバクを回避できる。
clearfix(IE6)
最後にfloatを解除してあげないと、親要素の高さが０になってしまう。ので、clearfixで解除するのだが、
before after疑似要素をサポートしているのはIE8からのため、IE7以前にもフロートを解除させるため、hasLayoutをオンにする必要がある。
要素に
*zoom:1;
パーセント指定することによるズレ(IE6,7)
widthやmarginの値を割合（パーセント）で指定する場合、IE6,7は、
％ → ピクセルに変換 → 小数点以下四捨五入
と計算するので、場合によっては親要素の幅より合計が大きくなる。
回避するために、
①％による指定をやめるか、
②IE6,7だけ少なめの数値を指定するか
①の計算
正確な割合を算出するためには、
以下の公式によって計算する必要ある。
答 = width - ( 0.5 / container * 100 );
→%表記ではなく、そのpx表記の答えを書く
ハックの方法
シンプルハック
*アスタリスクをプロパティ前に付けるとIE7以下のIEだけが適用される。
_アンダースコアをプロパティ前に付けるとIE6以下のIEだけが適用される。
ただ、CSSバリデーターにはひっかかるから、覚えておくこと。
条件付きコメント利用ハック
<!--[if lt IE 7]>
<html class="ie ie6 lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="ie ie7 lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8 lt-ie9">
<![endif]-->
<!--[if IE 9]>
<html class="ie ie9 gte-ie9">
<![endif]-->
<!--[if !IE]><!-->
<html class="no-ie">
<!--<![endif]-->
↑IEの各バージョンとIE以外のブラウザに別々のクラスを指定します。
これを利用し、
.selector {
color: green;
*color: pink; /* IE7以下 */
_color: navy; /* IE6以下 */
}
html.ie8 .selector {
color: blue; /* IE8 */
}
IE7にはピンク、IE6以下にはネイビー、IE8には、青色にできる。
例①：警告にも
<!--[if IE 8]>
<p class="warning">お使いのブラウザは古すぎです！新しいのを使いましょう。</p>
<![endif]-->
例②：スタイルシートを分ける
<!--[if lt IE 7]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
例③：jsで
var isIE6 = $('<div>')
.html('<!--[if IE 6]><i></i><![endif]-->')
.length;
IE10から条件付きコメントは基本的にサポートされなくなりました。
もうバグはない！ということでしょうかー。
Author And Source
この問題について(IE6, 7, 8対策), 我々は、より多くの情報をここで見つけました https://qiita.com/rico/items/e8876111f24502948d2e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .