IE10 CSS Hack介绍及IE11 CSS Hack

ie10已经上线一段时间了，相信已经有一部分前端潮人体验过了，但是针对ie10的css hack大家了解吗？ 
去年微软宣布，win8的Metro版IE10将不再支持插件，并且不再支持条件注释，这显然是一个冒险的举动。截至到现在，在ie6到ie9的浏览器各种各样的古怪行为，开发人员不得不使用条件注释，有条件的类，和其他特定于IE的css hack来解决。 

条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。 
但是，如果IE10不再支持条件注释，我们唯一的选择只能针对css的问题用css hack或者判断浏览器来解决 我们当然不希望使用后者。 

方法一：特性检测：@cc_on 

<!--[if !IE]><!--<script> 
if (/*@cc_on!@*/false) { 
document.documentElement.className =' ie10'; 
或者：
document.documentElement.className  = ' ie'   document.documentMode;
（经测试效果一样）
} 
</script><!--<![endif]--> 

请注意/*@cc_on ! @*/中间的这个感叹号。 
这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10的样式可以卸载这个这个选择器下： 

.ie10 .example { 
/* IE10-only styles go here */ 
} 

条件编译支持所有版本的ie浏览器，而其它浏览器不支持。但是很有可能以后IE11出来后，这种方法就失效了。。。 
需要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。 
当然，我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。 
不像其他的解决方案，在这种方法中，实际上是依赖于JavaScript，所以从另一个角度来看，我们是反对的。 

方法二：@media -ms-high-contrast 
IE10支持媒体查询，然后也支持-ms-high-contrast这个属性，所以，我们可以用它来hack ie10：
 

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

注意：上面的代码在IE11中也会生效！如果只对针对IE11，怎么办呢？下面是IE11的专属css hack.
 

@media all and (-ms-high-contrast:none) {
//这里是要单独为IE11设置的样式
}

转载请注明：前端录»IE10 CSS Hack介绍及IE11 CSS Hack

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=3-336-2"></script>