css互換性hack(ie 6,ie 7,ie 8,firefox,chrome)
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以上その他のブラウザ)の区別
IE 6のみ赤のフォントが表示され、他のブラウザでは青のフォントが表示されます.importantは優先度を表すので、前に置いて、順番は①②で、逆にすることはできません.
2. *
*の役割は、Firefox、Chromeなど、IE 6/7ブラウザとIE 8以上、その他の標準ブラウザを区別することです.
IE 6/7のみが赤のフォントを表示し、IE 8やその他の標準ブラウザ(Firefox、Chrome)は*を認識せず、青のフォントを表示しています.
3. _
_の役割は、IE 6と(IE 7以上およびその他のブラウザ)を区別することです.
IE 6のみ赤のフォントが表示され、他のブラウザでは青のフォントが表示されます
4. \9
9の役割は*と_を組み合わせることですIE 8を区別する
注意:IETesterでは、IE 7とIE 8が区別されていないことがわかります.オリジナルのIE 8ブラウザを交換してテストしてください.IETesterをあまり信用しないでください.
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をあまり信用しないでください.