ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS_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」を同時に理解できるためです。 , したがって、2 つの識別記号を使用して IE7 と Firefox を区別できます。
[例]:
#tip {
*background: black; /* IE7 の背景は黒になります。
_background : orange ; /* IE6 の背景がオレンジ色になります*/
}
【説明】: IE7 と IE6 はどちらも「*」(米文字サイズ) を認識できますが、IE6 は「_」(下線) を認識できますが、IE7 は認識できません。 IE6 と IE7 の違いは、IE7 では「_」を読み取ることができないという特徴によって簡単に区別できます。
[例]:
#tip {
background: black ! important; /* IE7 の背景は黒になります*/
background : orange ; /* IE6 の背景がオレンジ色に変わります*/
}
[説明]: IE7 では「! important;」を読み込むことができますが、IE6 では読み込むことができず、CSS の読み込み手順が上から下になるため、IE6 が「! important;」を読み込むと、 " を認識できず、次の行に直接ジャンプして CSS を読み込むと、背景色がオレンジ色になります。
[例]:
#tip {
background : black ; /* Firefox の背景は黒になります*/
_background : orange ;オレンジ色*/
}
[説明]: IE6 は「_」(下線) を認識できますが、Firefox は認識できないため、この違いを利用して Firefox と IE6 を区別し、効果的に CSS ハックを実現できます。