HTML の互換性の問題 -- HACK technology_html/css_WEB-ITnose

最初に言っておきます: この記事の主な目的は、IE8 バージョンと Firefox の互換性に関して遭遇した問題について説明することです。

ブラウザごとに異なる CSS を記述するプロセスは CSS ハックと呼ばれ、解決が難しい互換性の問題にも興味があると思います。

注意点:

インターネット上の多くの情報では、ハッキング セクションとして ! important がよく使用されていますが、実際にはこれは誤解です。 ! important はスタイルを変更するためによく使用されますが、ハッキングとは互換性がありません。この誤解の理由は、IE6 が ! important を積極的に認識しない場合があるためで、IE6 を識別するためのハックとして誤って使用されることがよくあります。ただし、IE6 だけが認識しない場合があることに注意してください (IE6 では、同じスタイル属性を定義するために同じ括弧が使用され、そのいずれかに important が追加されている場合、その重要なタグは無視されます。例: {background:red! important; background:green;} IE6 では、同じスタイルが異なる括弧内で定義されており、そのうちの 1 つに important が追加されている場合、これは背景の緑として解釈され、他のブラウザーでは背景の赤として解釈されます。 important は正常に機能します。例: div{background:red! important} div{background:green} の場合、すべてのブラウザは背景色を一律に赤として解釈します)

IE6、IE7、IE8、Firefox の互換性の問題を区別するための CSS HACK

1. IE ブラウザと非 IE ブラウザを区別する

例 :

#tip{ background:blue;/* IE の背景が青*/ background:red9;/*IE6、IE7、IE8 の背景が赤*/ }

2. 違い IE6、IE7、IE8、FF

違いの記号: "9"、"*"、"_"

例: #tip{ background:blue;/*Firefox の背景が青になります*/ バックグラウンド:red9;/*IE8 の背景が赤になります*/ *background:black;/ *IE7 の背景が黒になります*/ _background:orange;/*IE6 の背景がオレンジになります*/ }

注: IE シリーズのブラウザは「9」を読み取ることができるため、 , IE6 と IE7 は「*」（フォント サイズ）を読み取ることができ、IE6 は「_」（下線）を識別できるため、順番に書き留めることができます。これにより、ブラウザーが CSS 構文を正しく読み取って理解できるようになります。 IE のバージョンと IE ブラウザ (Firefox、Opera、Google Chrome、Safari など) を効果的に区別します。

3. IE6、IE7 と Firefox の違い

違いの記号: "*"、"_"

例:

#tip{ background:blue;/*Firefox の背景が青になります*/ *background:black ; /*IE7 の背景が変わります*/_background:orange;/*IE6 の背景がオレンジに変わります*/ }

注: IE7 と IE6 は「*」(フォント サイズ) を読み取ることができますが、IE6 は「_」(下線) を読み取ることができます。 IE7は「_」を読み取ることができず、Firefox (IEブラウザ)は「*」と「_」をまったく識別できないため、この違いによってIE6、IE7、Firefoxを区別できます

4. IE7とFirefoxを区別します

違いの記号: "*"、"! important"

例:

#tip{ background:blue;/*Firefox の背景が青に変わります*/ *background:green! important;/*IE7 の背景が緑に変わります*/ }

説明: Firefox は「! important」を認識できますが、「*」は認識できないため、IE7 は「*」と「! important」を同時に理解できるため、2 つの認識記号を使用して IE7 と Firefox を区別できます。

5. IE6とIE7の違い(方法1)

違いの記号: "*"、"_"

例:

#tip{ *background:black;/*IE7の背景変更*/ _background: orange ;/*IE6 の背景がオレンジ色に変わります*/ }

説明: IE7 と IE6 は両方とも「*」 (フォント サイズ) を認識できますが、IE6 は「_」 (下線) を認識できますが、IE7 は認識できません。 IE7 メソッドで読み取る _」機能を使用すると、IE6 と IE7 の違いを簡単に区別できます。

6. IE6 と IE7 の違い (方法 2)

違いの記号: "!重要"

例:

#tip{background:black! important;/*IE7 の背景の変更*/background:orange; / *IE6 の背景がオレンジ色に変わります*/ }

説明: IE7 では「! important;」を読み取ることができますが、IE 6 では CSS の読み取りステップが上から下に進むため、IE6 では「! important」を読み取ることができません。 CSS を読み取る次のステップに直接進むと、背景がオレンジ色で表示されます。

7. IE6とFirefoxの違い

違い記号: "_" 【例】:

#tip{ background:black;/*Firefoxの背景が変更*/ _background:orange;/*IE6の背景がオレンジに変更*/ }

説明: IE6 は「_」 (一番下の行) を認識できますが、Firefox は認識できないため、この違いを利用して Firefox と IE6 を区別し、CSShack を効果的に実現できます。

概要:

これらの HACK 技術概要が、助けを必要とする開発者に役立つことを願っています。また、IE シリーズの互換性の問題についてはあまり心配しないでください。