CSS hack
CSS hack
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩以前我们要兼容6-9，而现在10也出来了，在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行去搜索吧。不过ie10这朵奇葩，丫的居然不支持条件注释。在这里向ie 10 的开发工程师的全家问“好”。
Ok，废话不多说了。直接上代码。
.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:#F60\0\9; 这个东西是给IE8 玩的
background: red\9; 这个东西好玩了，所有的ie都认识他。
+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：
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
请注意/*@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
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
.test{background: #ffcccc;}
}
这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。
然后这种方式可能也会在后面的IE11中生效。
当然，方法二也可以和方法一一起用：
然而这个东西如果遇到了IE9的root 就不好用了。
No.3：@media 0
这个有些变态了，而且不太完美，因为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>document</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：文章部门内容来自 前端观察
