IE10 CSS Hack

IE10 CSS Hack

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

首先,IE10不支持条件注释了。

方法一:特性检测:@cc_on

这个是IE10新引入的私有语句,叫做条件编译(conditional compilation),用于JavaScript。使用了之后注释中的JS也会被解析:

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

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

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

 
 
  1. .ie10 .example {    
  2.    /* IE10-only styles go here */    
  3. }&nbsp; 

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

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

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

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

 
 
  1. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    
  2.    /* IE10-specific styles go here */    
  3. }&nbsp; 

方法三:@media 0这个有些变态了,而且不太完美,因为IE9也支持media,也支持的hack:

 
 
  1. @media screen and (min-width:0) {    
  2.     /* IE9 and IE10 rule sets go here */    
  3. }&nbsp; 

不过,估计后面IE10也会普及到Windows 7平台,所以IE9会消失,只是看看IE8和IE7的份额,这种情况可能不会发生吧。

英文:IE10 CSS Hacks

译文:ITeye

IE10 CSS Hack

相关文章:

你感兴趣的文章:

标签云: