IE10 CSS hack，IE兼容问题

IE10 CSS hack，IE兼容问题

作者： 雪影 发表于2013 年 4 月 25 日 分类：技术分享 | 暂无评论 | 人气: 376 度

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

方法一：特性检测：@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：

<!--[if !IE]><!--<script> 

if (/*@cc_on!@*/false) { 

    document.documentElement.className+=' ie10'; 

} 

</script><!--<![endif]-->

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

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

   /* IE10-specific styles go here */

}

条件编译支持所有版本的ie浏览器，而其它浏览器不支持。但是很有可能以后IE11出来后，这种方法就失效了。。。

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

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

方法二：@media -ms-high-contrast

IE10支持媒体查询，然后也支持-ms-high-contrast这个属性，所以，我们可以用它来hack ie10：

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

    document.documentElement.className += "ie10";

}

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

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

当然，方法二也可以和方法一一起用：

@media screen and (min-width:00) { 

    /* IE9 and IE10 rule sets go here */

}

不过，估计后面ie10也会普及到Windows 7平台，所以ie9会消失，只是看看ie8和ie7的份额，这种情况可能不会发生吧。。。

1, 选择符前缀法，即在CSS选择符前加一些只有特定浏览器才能识别的前缀。

*html 前缀只对IE6生效 *+html 前缀只对IE7生效

例如：

.test{ color:#FFF;}

*html .test{ color:#000;}  /* only for ie6 */

*+html .test{ color:#CCC;} /* only for ie7 */

2, 属性前缀法，即在样式属性名前加一些只有特定浏览器才能识别的前缀。

“-” 只对IE6生效

“*” 只对IE6和IE7生效

例如：

.test{ color:#FFF; *color:#CCC; -color:#000;}

3, 还有一种hack方法是在属性值后加上一些只有特定浏览器才能识别的前缀。

“9″  IE6/IE7/IE8/IE9/IE10都生效

“″ IE8/IE9/IE10都生效

“9″ 只对IE9/IE10生效

例如：

.test{ color:#FFF; color:#CCC9; color:#3FC0;}

 

文章内容整理自：http://www.impressivewebs.com/ie10-css-hacks/      http://www.ifrans.cn/css-hack/