Google Chrome 选择 IE9 特定的媒体查询

Question

我正在尝试将某些样式单独应用于 IE9 浏览器以使其正常工作。我参考了几篇文章（Jeff Clayton, ryadel) and ，他们建议我这样做：

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

这似乎在 IE 浏览器中工作正常，但样式也被 Chrome 浏览器采用。不确定是错误还是预期的方式。谁能帮我单独选择 IE9 和媒体查询，在此先感谢。

Answer 1

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

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

1) 使用条件

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

这可能是最好的方法。 Microsoft 知道 IE 不好，这就是他们引入它们的原因。一个重要的好处：所有其他浏览器都不必下载低劣的 IE9 CSS.

2) 在 HTML-body 上使用 class（使用 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）

Google Chrome 选择 IE9 特定的媒体查询

Google Chrome picking up IE9 specific media queries

css

internet-explorer

google-chrome

internet-explorer-9

media-queries