使用 IE10/11 的媒体查询的 css 浏览器 hack 不起作用答案

【问题标题】：css browser hack using media query for IE10/11 not working使用 IE10/11 的媒体查询的 css 浏览器 hack 不起作用
【发布时间】：2020-07-18 07:05:19
【问题描述】：

我在几个网站上发现了这个 css 查询，因此我可以定位在 IE11 上浏览的用户：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

我是这样实现的：

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

#browser_warning{
    display: none;
}

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #browser_warning{
        display: block;
    }
}

而 html 很简单：

<body>  
    <div id="browser_warning">
        <h1>Stop using IE11, FFS!</h1>
    </div>
</body>

但它只是不工作 - 即使我在 IE11 中运行它，显示仍保持为 none。是什么阻止了它的工作？我尝试了几种选择，包括Targeting IE 11 in css not working

没有内联 css 样式，唯一的父元素是 body。 css 样式表中没有 div 样式。我正在运行 IE11，但使用 Visual Studio IIS Express 对其进行测试 - 虽然我看不出这有什么关系，但它仍然是 IE11 解析 html 和 css。

【问题讨论】：

这能回答你的问题吗？ Targeting IE 11 in css not working
不，我刚刚尝试了该答案的三个替代方案，但它仍然不起作用。我只是不明白为什么它失败了！
IE11 以兼容模式运行。 SMH。

标签： html css

【解决方案1】：

答案很简单：

检查 IE11 没有在兼容模式下运行域！

我为此花了一个多小时，它还解决了我遇到的许多其他样式问题。

事实上，它解决了需要我首先运行浏览器警告的问题 :D :D

如果不是那么好笑，那就太可悲了……

【讨论】：