传说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也会被解析:
- <!--[if !IE]><!--<script>
- if (/*@cc_on!@*/false) {
- document.documentElement.className+=' ie10';
- }
- </script>
请注意/*@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-contrastIE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack IE10:
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- /* IE10-specific styles go here */
- }
方法三:@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的份额,这种情况可能不会发生吧。