css ie hack整理

2148 ワード

ネット上にはie hackに関する文章がたくさんありますが、文章が発表された後もieのバージョンがアップグレードされている可能性があります.そのため、いくつかのhackの書き方はもう適用されません.以下は本人が整理したie 6-11のhackのよく使われる書き方です.(次のデフォルトのドキュメントモードは標準モードです)
1.条件判断ieバージョンによる異なるcssの参照
<!--[if IE]>   ie   <![endif]-->
<!--[if !IE]>    ie   <![endif]-->
<!--[if IE 6]>   ie6   <![endif]-->
<!--[if gt IE 6]>     ie6   <![endif]-->
<!--[if lt IE 9]>     ie9    <![endif]--> 
<!--[if gte IE 8]>        ie8   <![endif]--> 
<!--[if lte IE 7]>        ie7   <![endif]-->

以上のように、異なる外部チェーンcssを参照したり、インラインスタイルテーブルを直接使用したりすることで、基本的な要件を満たすことができます.
 
2.css属性のhack書き方を直接使用します.
1)!importantはie 6で別れを知らない!importantは、他のブラウザで認識されているのでie 6 hackに使用できます.
div{

  max-width:100px;

  width:auto !important;

  width:100px;          

}


 
2)下線''ie 6には専用hackの書き方があります.
div{

  color:blue;

  _color:red;  /*   ie6        */

}

 
3)アスタリスク'*'ie 6,7の共通の書き方.  
div{

  color:blue;

  *color:red;   /* ie6,7        */

}


ie 7には専用の書き方はありません.*はie 6,7を同時に認識します.ie 7だけを認識したい場合は、下線''を同時に合わせることができます.使用します.  
 
4)0 ie 8以上のブラウザは0の書き方を認識し、ie 6,7は認識しない
div{

    color:red;

    color:#ccc\0;

}


以上の書き方はie 8以上のブラウザでしか認識されず、ie 6,7は認識されず、ie 6,7は通常の書き方(color:red)を認識しないため、ie 6,7に適した「*」を同時に使用する必要がある.
 
5)9 ie 6-10はすべて9を識別して、10以上は識別しません
div{

    color:red;

    color:blue\9;                   /*ie 6-10  blue*/

} 

 
6)90 ie 9,10識別ie 8,11は識別せず、デフォルトie 6,7は識別せず、デフォルトも使用しない
div{

  color:red;

  color:blue\9\0;  

}


以上の書き方はie 9,10では青色,ie 8,11では赤色,ie 6,7では黒,ie 6,7では'*'hackを単独で使用する必要がある.
 
以上、まとめたie hackの書き方ですが、コードも例もテストしました.皆さん、補充して、分かち合うことを歓迎します.
最後に、ieの異なるバージョンの表現が一致しないことを他の方法で避けることができれば、hackの書き方はできるだけ使わないでください.