IE10的CSS技巧

文章出自：IT屌丝-码农之家

微软宣布IE10 将不支持条件注释。他们的历史，这显然是一个冒险的举动。截至目前，针对古怪的行为在IE6-9，开发人员已经使用条件的意见，有条件的类，以及其他IE特定的hack。

但是，如果没有条件在IE10的意见，唯一的选择，我们针对CSS问题是Hack或浏览器嗅探 - 我们当然不希望诉诸后者留下。

IE10专门使用一个Hack。下面是这技术的总结，供参考。

方法1:
特征检测@ cc_on
脚本里面是不包括一个IE的条件注释，以确保IE6-9不承认它，那么它的特点是检测一种叫做 @ cc_on 。在这里，它是：

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

复制代码

请注意/*@cc_on ! @*/中间的这个感叹号；这样就可以在ie10中给html元素添加一个class=”ie10″。然后在你的CSS，只需要使用“IE10”类：

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

复制代码

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

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

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

方法2:
@media -ms-high-contrast Hack
IE10支持媒体查询，也支持-ms-high-contrast这个属性，所以，我们可以用它来hack IE10：

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

复制代码

最终这一条可能是最好的选择，但也许不是现在。最后，IE9用户都应该得到通知通过Windows Update升级到IE10。这应该是包括Windows 7用户。如果发生这种情况，IE9的市场份额最终将被接管的IE10，以同样的方式发生这种情况与其他浏览器自动更新。

除此之外，如果这个分析错误是固定的IE11，那么，这意味着它也将是未来的证明。但我们不会知道，直到被释放IE11。

方法3:
@media Zero Hack
这个有些BT了，而且不是很完美，因为IE9也支持media，也支持\0这个hack：

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

复制代码

现在的windows 7中的ie9已经可以升级到ie10了，相信要不了多久IE10就会代替IE9;