如何使用 CSS Hacks 僅針對 Internet Explorer 11 並為其設定樣式？-css教學-PHP中文網

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

Patricia Arquette

發布： 2024-12-04 18:55:16

原創

271 人瀏覽過

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中文網其他相關文章！