ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS と IE6 IE7 と IE8_html/css_WEB-ITnose 間の互換性の問題
1. IE ブラウザと非 IE ブラウザの違い
#tip {
background : blue ; /*IE 以外の背景色 */
background : red 9 ; /* IE6、IE7、IE8 の背景色 * /
}
[違いの記号]: "9"、"*"、"_"
【例】:
#tip {
background: blue; * Firefox の背景が青になります*/
background : red 9 ; /* IE8 の背景が赤になります*/
*background : black ; /* IE7 の背景が黒になります*/
_background : /* IE6 の背景がオレンジになります*/
}
[違いの記号]: "*"、"_"
[例]:
#tip {
background: blue; /* Firefox の背景が青になります。 /
*background : black ; /* IE7の背景が黒になります*/
_background : orange ; /* IE6の背景がオレンジになります*/
}
[例]:
#tip {
background : blue ; * Firefox の背景が青になります*/
*background : green ! important ; /* IE7 の背景が緑になります*/
*background : orange /* IE6 の背景がオレンジになります*/
}
【説明】: IE7 は「*」を認識しますただし、IE6 では「*」のみ認識できますが、「!重要」は認識できません。Firefox では、「!重要」は読み取れますが、「*」は認識できないため、この違いを利用して分離を効果的に区別できます。 IE6、IE7、Firefox。
[例]:
#tip {
background: blue; /* Firefox の背景が青になります*/
*background: green ! important ; /* IE7 の背景が緑色になります*/
}
[説明]: Firefox は「! important」を認識できますが、「*」は認識できませんが、IE7 は「*」と「! important」を同時に理解できるためです。 . であるため、IE7 と Firefox を区別するために 2 つの識別記号を使用できます。
[例]:
#tip {
*background: black; /* IE7 の背景は黒になります。
_background : orange ; /* IE6 の背景がオレンジ色になります*/
}
【説明】: IE7 と IE6 はどちらも「*」(米文字サイズ) を認識できますが、IE6 は「_」(下線) を認識できますが、IE7 は認識できません。 IE6 と IE7 の違いは、IE7 では「_」を読み取ることができないという特徴によって簡単に区別できます。
[例]:
#tip {
background: black !payment; /* IE7 の背景は黒になります*/
background : orange ; /* IE6 の背景がオレンジ色になります*/
}
[説明]: IE7 では「! important;」を読み込むことができますが、IE6 では読み込むことができず、CSS の読み込み手順が上から下にあるため、IE6 が「! important;」を読み込むと、 " を認識できず、次の行に直接ジャンプして CSS を読み取ると、背景色がオレンジ色で表示されます。
[例]:
#tip {
background : black ; /* Firefox の背景は黒になります*/
_background : orange ;オレンジ色*/
}
[説明]: IE6 は「_」(下線) を認識できますが、Firefox は認識できないため、この違いを利用して Firefox と IE6 を区別し、CSS ハックを効果的に実現できます。