Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

IE6, 7, 8対策

More than 5 years have passed since last update.

それぞれのブラウザで使えない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宣言の前に1バイトでも文字があるとCSSの解釈をバージョン6未満のIEに合わせるモード(後述:後方互換モード)に切り替わってしまう。(box-sizingプロパティをIEがサポートしたのはIE8からだから使用できなくなる。)

 ・テキストエディタによっては文書の先頭にByte order markと呼ばれる3バイトの情報を付加することがあり、これも後方互換モードの引き金になってしまう。
 ・html5の場合、標準的なdoctype宣言を書けば、IEは、CSSの解釈をW3Cが定めた仕様にあわせるモード、標準準拠モードで動作する。

hasLayout(IE6,7)

他の特定のプロパティを指定することで、間接的にオンの状態にすれば、だいたい直る。

*zoom:1;

floatとダブルマージン(IE6)

floatで指定したのと同じ方向にmarginを指定すると、
marginが指定した数値の倍の値になってしまうことをダブルマージンという。
display:inlineを追加するとこのバクを回避できる。

clearfix(IE6)

最後にfloatを解除してあげないと、親要素の高さが0になってしまう。ので、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から条件付きコメントは基本的にサポートされなくなりました。
もうバグはない!ということでしょうかー。

rico
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away