时间戳

首页 > 解决方案 > 使用 IE10/11 的媒体查询的 css 浏览器 hack 不起作用

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

问题描述

我在几个网站上发现了这个 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>

但它只是不工作 -none即使我在 IE11 中运行它，显示仍然保持不变。是什么阻止了它的工作？我已经尝试了几种替代方法，包括那些在 CSS 中定位 IE 11 不起作用

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

标签： htmlcss

解决方案

答案很简单：

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

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

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

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

推荐阅读