IE10的CSS Hack

web前端 11581 11年前 (2013-02-26)

刚才在网上看到了IE10的CSS Hack方法,发现IE10浏览器不再支持条件注释了,于是我用IE10浏览器访问以前做过的一些项目都没有发现异常。PS:项目很少使用条件注释,无非是兼容IE6透明样式,IE7+所使用的PNG图片都是透明的,那么IE10不支持条件注释也就无所谓了。

下面是我整理的三种IE10的CSS Hack:

方法一:特性检测:@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack,使IE6~9浏览器不支持它。

<!--[if !IE]><!--<script>  
if (/*@cc_on!@*/false) {  
    document.documentElement.className+=' ie10';  
}  
</script><!--<![endif]-->

请注意/*@cc_on ! @*/中间的这个感叹号。

用这种方法就可以在ie10中给html元素添加一个class="ie10",然后针对ie10的样式可以卸载这个这个选择器下:

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

目前我还不清楚@ cc_on这种语句,但有可能在IE11发布的时候,会导致的一些问题。

方法二:@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 */ 
}

这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。

然后这种方式可能也会在后面的IE11中生效。

当然,方法二也可以和方法一一起用:

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}

方法三:@media 0

这个方法不是太完美,因为IE9也支持media和\0的hack。

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */ 
}

当然了,IE10的CSS Hack方法并不止这些,还有我们没有找到的方法,无论哪一种方法,你能够熟练运用就好。

分享给朋友: