IE10 CSS Hack

2013-02-03 17:18:21   来源:   评论:0
传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本IE的hack引发的,有些不确定是否是IE10引出的bug,所以惯性思维让我们重新寻找针...
传说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,也支持\0的hack:


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

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


相关热词搜索:IE10 CSS
延伸阅读

友情链接

服务电话: 0722-7113736 作息时间:周一至周五 8:30-17:50

CopyRight © 2010-2012 版权所有:随州博强网络科技 

洒水车 www.szbq.net 随州生活宝 汽车公告 地址: 随州市时代广场C区115号  随州博强网络科技

客服中心
售前咨询:
点击这里
售前咨询:
点击这里
售后咨询:
点击这里
技术支持:
点击这里
电脑客服:
点击这里
400电话:
点击这里
服务热线:0722-7113736