Question

我试图单独对IE9浏览器应用某些样式，以使其起作用。我提到了几篇文章（Jeff Clayton，ryadel）和this answer，他们建议我这样做：

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

这似乎在IE浏览器中可以正常工作，但是样式也可以在Chrome浏览器中使用。不确定是错误还是预期的方式。有人可以帮助我选择单独的IE9进行媒体查询吗？

Answer 1

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

除了我真的为您感到抱歉，您仍然必须支持IE9之外，我还建议使用以下解决方案之一：

1）使用条件

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

这可能是最好的方法。微软知道IE不好，这就是他们引入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）

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

1 个答案: