如何使用 CSS Hacks 仅针对 Internet Explorer 11 并为其设置样式？-css教程-PHP中文网

如何使用 CSS Hacks 仅针对 Internet Explorer 11 并为其设置样式？

Patricia Arquette

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

原创

286 人浏览过

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中文网其他相关文章！