CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります

$CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります$

Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩まされます。互換性を考慮して設計する場合、さまざまなブラウザで正常に表示されるという目的を達成するために、さまざまなブラウザで認識できる独自の構文をハッキングすることがよくあります。その中でも、\9 と \0 が最もよく使われます。 \9 と \0 は、IE8、IE9、IE11 をハッキングするための一意の識別子です。しかし、疑問は、\9 と \0 はどのようにして IE8、IE9、IE11 をハッキングするのかということです。この問題は長い間私を悩ませてきました。しかし、今日、私はついにそれを解明し、IE8、IE9、IE11 をハッキングできるコードライティングモードを作成しました。この記事ではそれを皆さんと共有します。

\9 および \0 の可能なハックが IE11\IE9\IE8 では無効なのはなぜですか?

多くの人は、\0 は IE8、IE9、IE11 をハッキングするために使用され、\9 は IE9 をハッキングするために使用されることを理解しているかもしれません。しかし、実際に適用してみると、うまくいかないこともあります。次の HTML コードを見てください。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          背景色:#0000FF\0; /* 青*/
          background-color:#FFFF00\9; /* 黄色 */
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE8 IE9 IE11 はすべて黄色で表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack1.html

上記の例では、\9 と \0 では、さまざまな IE ブラウザバージョンをハッキングするという目的を達成できません。しかし、/* blue */ と /* yellow */ の行を入れ替えるとどうなるでしょうか? HTMLコードをご覧ください:

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#FFFF00\9; /* 黄色 */
          背景色:#0000FF\0; /* 青*/
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では黄色で表示され、IE8 と IE9 では両方とも青色で表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack2.html

その結果、IE11 では黄色が表示され、IE8 と IE9 では両方とも青色が表示されます。

上記の 2 つの例は、IE8 と IE9 が \9 と \0 の識別子の両方を読み取ることができ、2 つの識別子のうち後で書き込まれた方が優先されることを示しています。一方、IE11 は \9 の識別子のみを読み取ることができます。

この時点で、上記の結論に基づいて IE8、IE9、IE11 をハッキングするコードを記述できるでしょうか?明らかにそうではありません。少なくとも IE8 と IE9 をハッキングすることはできません。ハッキングできるのは IE11 だけです。

IE8 と IE9 をハッキングする方法
では、IE8 と IE9 をハッキングするにはどうすればよいでしょうか?これが問題の核心です。

この記事では、CSS が IE8/IE9/IE10/IE11 Chrome Firefox コードを区別し、IE9 以降のブラウザーがこのコードを理解できることが述べられています。

/* IE9+ */
@media すべておよび (最小幅:0) {
    .divコンテンツ{
        背景色:#eee;
    }
}

このコードを前のコードと組み合わせると、IE8 と IE11 をハッキングできますか?完全な HTML コードは次のとおりです。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#FFFF00\9; /* 黄色 */
          背景色:#0000FF\0; /* 青*/
    }
    /* IE9+ */
    @media すべておよび (最小幅:0) {
        。コンテンツ{
            背景色:#000; /* 黒 */
        }
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では黄色、IE8 では青、IE9 では黒が表示されます。 </div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack3.html

この時点で、IE8、IE9、IE11 の互換性の問題は解決されています。

ただし、@media all と (min-width:0) は Chrome、Firefox、360 などの他のブラウザでも有効なので、まだ試していません。したがって、上記のコードを少し変更する必要があります。@media all and (min-width:0) {} の CSS ステートメントにも \0 マークが追加され、これが IE9 のスタイルであることを示します。変更された完全なコードは次のとおりです。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#FFFF00\9; /* 黄色 */
          背景色:#0000FF\0; /* 青*/
    }
    /* IE9+ */
    @media すべておよび (最小幅:0) {
        。コンテンツ{
            背景色:#000\0; /* 黒 */
        }
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では黄色、IE8 では青、IE9 では黒が表示されます。 </div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack4.html

この時点で、IE8、IE9、IE11 の互換性の問題は完全に解決されています。

メタ宣言属性 IE=Edeg の後には、IE8\IE9\IE11 と互換性のあるコードが記述されます。ただし、Web ページの HTML コードでメタ要素 IE=Edge が宣言されている場合、上記のコードは正しくありません。

最初の HTML コードを見てみましょう。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="X-UA-compatible" content="IE=Edge" /> 
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          背景色:#0000FF\0; /* 青*/
          background-color:#FFFF00\9; /* 黄色 */
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では青で表示され、IE8 と IE9 では黄色で表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack5.html

結果として、IE11 では青が表示され、IE8 と IE9 では両方とも黄色が表示されますが、3 つのブラウザーすべてが黄色を表示するわけではありません。

つまり、meta IE=Edge ステートメントを追加すると、IE11 は \9 タグを読み取れなくなります。

次のコードを見てみましょう。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="X-UA-compatible" content="IE=Edge" /> 
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#FFFF00\9; /* 黄色 */
          背景色:#0000FF\0; /* 青*/
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE8 IE9 IE11 はすべて青で表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack6.html

結果として、IE8、IE9、IE11 はすべて青色で表示され、IE8、IE9、IE11 はすべて \0 記号を理解できることがわかります。

上記の 2 つの例を組み合わせると、メタ IE=Edge 属性を追加すると、IE8 と IE9 は \9 と \0 の両方の識別子を読み取ることができるが、IE11 は \0 識別子のみを読み取ることができるという結論が導き出されます。

したがって、これに基づいて IE11 をハックすることができます。次の HTML コードは以下を説明します。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="X-UA-compatible" content="IE=Edge" /> 
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#0000FF\0; /* 青はIE11用です*/
          background-color:#FFFF00\9; /* 黄色は IE8 と IE9 用です*/
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では青で表示され、IE8 と IE9 では黄色で表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack7.html

このように、上記のコードを使用して IE8 と IE9 をハッキングすることができます。

IE8 と IE9 をハッキングするにはどうすればいいですか?以前のハック IE8 IE9 のキーコードはまだ:

@media すべておよび (最小幅:0) {}

完全な HTML コードは次のとおりです。

<!DOCTYPE html>
<ヘッド>
    <meta http-equiv="X-UA-compatible" content="IE=Edge" /> 
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11_css をハックする example_webkaka.com</title>
    <スタイル タイプ="text/css">
    。コンテンツ{
          幅:400px;高さ:50px;色:#ccc;
          背景色:#FF0000; /* 赤 */ 
          background-color:#0000FF\0; /* 青はIE11用です*/
          background-color:#FFFF00\9; /* 黄色は IE8 と IE9 用です*/
    }
    /* IE9+ */
    @media すべておよび (最小幅:0) {
        。コンテンツ{
            background-color:#000\9; /* 黒は IE9 用です*/
        }
    }
    </スタイル>
</head>
<本文>
     <div class="content">IE11 では青、IE8 では黄色、IE9 では黒が表示されます</div>
</本文>
</html>

テストアドレス: http://demo.jb51.net/html/ie-hack/ie-hack8.html

@media all と (min-width:0) {} の \9 に特に注意してください。これは IE9 用であることを示します。そうでない場合は、Chrome、Firefox、360 などのブラウザーで読み取ることができます。この例では、meta で IE=Edge 属性が宣言されている IE11 でも読み取ることができます。

結論

この記事では、IE8、IE9、IE11 をハッキングする方法の問題に対する完璧な解決策を示しました。理解しなければならない点が 2 つあります。メタで IE=Edge 属性が宣言されているかどうかです。これは、ハックコードの記述方法に大きな違いをもたらします。\9 と \0 の使用も非常に巧妙です。

<<: Vueコンポーネントの詳細な説明

>>: MySQL ジョイントインデックスの使用ルール