css - 谷歌浏览器获取 IE9 特定的媒体查询

标签 css google-chrome internet-explorer media-queries internet-explorer-9

我正在尝试将某些样式单独应用于 IE9 浏览器以使其正常工作。我引用了几篇文章( Jeff Claytonryadel )和 this answer ,他们建议我这样做:

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 .ie9only { /* some  styles */ }
}

这似乎在 IE 浏览器中工作正常,但样式也适用于 Chrome 浏览器。不确定是错误还是预期的方式。有人可以帮助我单独选择 IE9 和媒体查询,在此先感谢。

最佳答案

正如链接问题中所解释的,媒体查询是媒体查询,而不是浏览器查询,因此您根本不应该尝试这个。因为您要搜索的是复杂的技巧。它们很难测试,并且会使您的元素难以维护。

除了我真的为你仍然必须支持 IE9 感到难过之外,我会推荐以下解决方案之一:

1) 使用条件

<!--[if lte IE 9]>
  <link rel="stylesheet" type="text/css" href="ie-only.css">
<![endif]-->

这可能是最好的方法。 Microsoft 知道 IE 不好,这就是他们引入它们的原因。一个重要的好处:所有其他浏览器不必下载糟糕的 IE9 CSS。

2) 在 HTML 主体上使用一个类(使用 JavaScript)

var browser = {
        isIe: function () {
            return navigator.appVersion.indexOf("MSIE") != -1;
        },
        navigator: navigator.appVersion,
        getVersion: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1)
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    };

if (browser.isIe() && browser.getVersion() == 9) {
     document.body.className += ' ' + 'ie9';
}

在您的 CSS 中,您只需执行以下操作:

.ie9 #my-elem-to-style {

}

届时,CSS 特异性的简单规则将解决您的问题。

3) 如果适用,使用库(例如 Modernizr)

关于css - 谷歌浏览器获取 IE9 特定的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53658141/

相关文章:

web-applications - 您对 "deploying"通过将 Web 应用程序包装在 google chrome 窗口中到桌面的想法?

javascript - Angular.js 应用程序代码无法在 chrome 上运行 - 错误 "Failed to execute ' ReplaceState'

angular - 如何防止 Angular 中的内存泄漏

internet-explorer - Internet Explorer 正在破坏下载文件名

c - 使用 Visual Studio 2010 调试 ActiveX 控件

html - 如何获得页眉固定顶部、容器可滚动和页脚固定底部的侧边栏?

javascript - Bootstrap (v3.1.1) 模式不显示

html - 为什么 `text-align:justify` 只对图像的第一行有效?

html - 整个网页左侧不需要的边距/间隙

Java cookie 在 Firefox 中被删除,但在 Google 或 IE 中未被删除