css的hack详解-CSDN博客

本文链接：https://blog.csdn.net/u010888581/article/details/9055543

ie10不支持条件注释。

.test{

background: #f00; /*各浏览器都认识，主要给高级浏览器用*/

background: blue\0; /*ie10、9、8*/

background: red\9; /*所有的 ie*/

background:#F60\0\9; /*\0\9 或 \9\0 IE8*/

+background: yellow; /*ie7、6 +号同*号 */

_background:black; /*ie6*/

}

:root .test{background: blue\9;} /*ie9*/

background:#f00; 各浏览器都认识，主要给高级浏览器用
background: blue\0; 网上说是给IE8的，不过经过测试，IE10、9、8都认识他。
background: red\9; 这个东西好玩了，所有的ie都认识他。
background:#F60\0\9; 这个东西是给IE8 玩的
+background: yellow; *或+ 留给了IE7、6 这一点还是不错的
_background:black; _专门留给神奇的ie6
:root .test{background:blue\9;} :root是给ie9的，网上流传了个版本是 :root #test { background:blue\0;}，新版opera也认识，所以经过反复验证最终ie9特有的为:root 选择符 {属性\9;}

而最奇葩的其实是IE10，检测IE10有三种方法：

No.1 特性检测：@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：


复制代码
请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10的样式可以卸载这个这个选择器下：
.ie10 .test {
/* IE10-only styles go here */
}

复制代码
条件编译支持所有版本的ie浏览器，而其它浏览器不支持。但是很有可能以后IE11出来后，这种方法就失效了。。。
需要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。
当然，我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。

No.2@media -ms-high-contrast
/* IE10-specific styles go here */
.test{background: #ffcccc;}
}

普通浏览复制代码

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { </div> /* IE10-specific styles go here */

.test{background: #ffcccc;}

}

这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。
然后这种方式可能也会在后面的IE11中生效。
当然，方法二也可以和方法一一起用：
然而这个东西如果遇到了IE9的root 就不好用了。

No.3：@media0

这个有些变态了，而且不太完美，因为IE9也支持media，也支持\0的hack：

普通浏览复制代码

@media screen and (min-width:0\0) {

/* IE9 and IE10 rule sets go here */

}

不过，估计后面ie10也会普及到Windows 7平台，所以ie9会消失，只是看看ie8和ie7的份额，这种情况可能不会发生吧。。。

总结：
上面这么一大坨，看起来乱乱的，在此为大家提供了一个相对来说较好的方法：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>by 智能社</title>
<style>
.test{
width: 300px;
height: 300px;
background: #f00; /*各浏览器都认识，主要给高级浏览器用*/
background: blue\0; /*ie10、9、8*/
background: red\9; /*所有的 ie*/
+background: yellow; /*ie7、6 +号同*号 */
_background:black; /*ie6*/
}

:root .test{background: blue\9;} /*ie9*/
.ie10 .test{background: #ffcccc;} /*ie10 (js 专属)*/
</style>
<script type="text/javascript">
//ie 10
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10";
}
</script>
</head>

<body>
<div class="test">test</div>
</body>
</html>
复制代码
如果运行代码有问题，请大家可以保存成html。

PS：还是那句话，我们能不用hack就不用hack。
PPS：文章部门内容来自前端观察