CSS ハックを使用して Internet Explorer 11 のみをターゲットにしてスタイルを設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS ハックを使用して Internet Explorer 11 のみをターゲットにしてスタイルを設定するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-04 18:55:16

オリジナル

270 人が閲覧しました

How Can I Use CSS Hacks to Target and Style Only Internet Explorer 11?

IE 11 の CSS ハック

IE 11 で直面するレンダリングの問題に対処するには、このブラウザーのみが解析できる CSS フィルターを利用する必要があります。 .

Microsoft 固有の CSSルール

Microsoft 固有の CSS ルールを組み合わせて IE11 をターゲットにします:

@media all and (-ms-high-contrast:none)
{
    /* IE10 styles */
    .foo { color: green }
    
    /* IE11 styles */
    *::-ms-backdrop, .foo { color: red }
}

ログイン後にコピー

キープリンシプル

これらのフィルターが機能する理由は次のとおりです。 :

ユーザーエージェント(ブラウザ)が理解できない場合セレクター (有効な CSS 2.1 ではないため) は、セレクターと後続の宣言ブロックの両方を無視する必要があります。

例

次の HTML とCSS コード:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            @media all and (-ms-high-contrast:none)
            {
                .foo { color: green } /* IE10 */
                *::-ms-backdrop, .foo { color: red } /* IE11 */
            }
        </style>
    </head>
    <body>
        <div class="foo">Hi There!!!</div>
    </body>
</html>

ログイン後にコピー

IE11 では、 *::-ms-backdrop セレクターが認識され、「Hi There!!!」というテキストが表示されます。赤色で表示されます。 IE 以外のブラウザでは、これらのルールは単純に無視されます。

以上がCSS ハックを使用して Internet Explorer 11 のみをターゲットにしてスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。