前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

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