首頁 >web前端 >css教學 >如何使用 CSS Hacks 僅針對 Internet Explorer 11 並為其設定樣式?

如何使用 CSS Hacks 僅針對 Internet Explorer 11 並為其設定樣式?

Patricia Arquette
Patricia Arquette原創
2024-12-04 18:55:16304瀏覽

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

IE 11 的CSS Hacks

要解決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 選擇器被識別和文字“嗨,那裡!!!”將以紅色顯示。在非 IE 瀏覽器中,他們會忽略這些規則。

以上是如何使用 CSS Hacks 僅針對 Internet Explorer 11 並為其設定樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn