传说Windows 8刚上市没几天就卖出了4000多万份，好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的，有些不确定是否是ie10引出的bug，所以惯性思维让我们重新寻找针对IE10的CSS Hack。
首先，ie10不支持条件注释了。前端UI分享
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：该脚本里面的IE排除条件注释，以确保IE6-9不承认它，然后它功能检测到了名为@ cc_on。
google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。
|
1
2
3
4
5
|
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false)
{ document.documentElement.className+=‘
ie10‘;}</script><!--<![endif]--> |
请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10的样式可以卸载这个这个选择器下：
|
1
2
3
|
.ie10 .example
{ /*
IE10-only styles go here */} |
这是ie10标准模式下的截图：前端UI分享
这是ie10，IE8模式下的截图：
条件编译支持所有版本的ie浏览器，而其它浏览器不支持。但是很有可能以后IE11出来后，这种方法就失效了。。。
需要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。
当然，我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。
IE10支持媒体查询，然后也支持-ms-high-contrast这个属性，所以，我们可以用它来hack ie10：
|
1
2
3
|
if (window.matchMedia("screen
and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches)
{ document.documentElement.className
+= "ie10";} |
这种写法可以适配到高对比度和默认模式，所以可以覆盖到所有ie10的模式了，然后这种方式可能也会在后面的IE11中生效。
当然，方法二也可以和方法一一起用：前端UI分享
|
1
2
3
|
@media screen and
(min-width:0\0)
{ /*
IE9 and IE10 rule sets go here */} |
不过，估计后面ie10也会普及到Windows 7平台，所以ie9会消失，只是看看ie8和ie7的份额，这种情况可能不会发生吧。。。
这个方法不是太完美，因为IE9和预览版的IE11也支持media和\0的hack。
|
1
2
3
|
@media screen and
(min-width:0\0)
{ /*
IE9 , IE10 ,IE11 rule sets go here */} |
我不想给ie写hack，嗯，不想为ie多写一句代码。。。
原文地址：http://blog.csdn.net/ariss123/article/details/38980639
