我正在尝试将某些样式单独应用于 IE9
浏览器以使其正常工作。我引用了几篇文章( Jeff Clayton , ryadel )和 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/