css互換性hack(ie 6,ie 7,ie 8,firefox,chrome)

1631 ワード

IEの各バージョンのブラウザ間の識別は以下のように要約される.
IE 6:*、9、および_を識別できるあ、認識できない!important
IE 7:認識できる*、9と!important、認識できません_
IE 8:識別できる9と!important、認識できません_および*
Firefox(Chrome):認識できる!important、認識できません_および*
書く順番は、認識力の強いブラウザのcssを後ろに書くのが一般的です.
 
1. !important
!importantの役割は、指定されたスタイルルールの適用優先度を高めることであり、IE 6のみが認識されない
IE 6と(IE 7以上その他のブラウザ)の区別
body{
    color:blue !important;-------------------------①
    color:red;-------------------------------------②
}

IE 6のみ赤のフォントが表示され、他のブラウザでは青のフォントが表示されます.importantは優先度を表すので、前に置いて、順番は①②で、逆にすることはできません.
 
2. *
*の役割は、Firefox、Chromeなど、IE 6/7ブラウザとIE 8以上、その他の標準ブラウザを区別することです.
body{
    color:blue;
    *color:red;
}

IE 6/7のみが赤のフォントを表示し、IE 8やその他の標準ブラウザ(Firefox、Chrome)は*を認識せず、青のフォントを表示しています.
 
3. _
 _の役割は、IE 6と(IE 7以上およびその他のブラウザ)を区別することです.
body{
    color:blue;
    _color:red;
}

IE 6のみ赤のフォントが表示され、他のブラウザでは青のフォントが表示されます
 
4.  \9
9の役割は*と_を組み合わせることですIE 8を区別する
body{
  background-color: #CC00FF; /*            */
  background-color: #FF0000\9; /*IE6、IE7、IE8     */
  *background-color: #0066FF; /*IE6、IE7     */   
  _background-color: #009933; /*IE6     */
}

    IE6、IE7、IE8             
  css hack,                 
  :
\9 : IE6 IE7 IE8
*  : IE6 IE7
_  : IE6

注意:IETesterでは、IE 7とIE 8が区別されていないことがわかります.オリジナルのIE 8ブラウザを交換してテストしてください.IETesterをあまり信用しないでください.