IE10 CSS hack 博客分类： css相关 css兼容

整理自：http://www.impressivewebs.com/ie10-css-hacks/

中文原文： IE10 CSS hack

 

传说Windows 8刚上市没几天就卖出了4000多万份，好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的，有些不确定是否是ie10引出的bug，所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。

首先，ie10不支持条件注释了。

方法一：特性检测：@cc_on

这个是ie10新引入的私有语句，叫做条件编译(conditional compilation)，用于javascript。使用了之后注释中的js也会被解析：

<!--[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 */  
} 

好吧，其实不知道IE11会不会继续支持这个私有语句，如果是的话，就比较难区分IE10和IE11了。

需要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE10浏览器中使用。

当然，我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。

方法二：@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也会普及到Windows 7平台，所以ie9会消失，只是看看ie8和ie7的份额，这种情况可能不会发生吧。。。

总结：

我不想给ie写hack，嗯，不想为ie多写一句代码。。。