首先，ie10不支持条件注释了。css
方法一：特性检测：@cc_on
咱们能够用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：html
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
|
请注意/*@cc_on ! @*/中间的这个感叹号。web
这样就能够在ie10中给html元素添加一个class=”ie10″，而后针对ie10的样式能够卸载这个这个选择器下：浏览器
@media
screen
and (-ms-high-contrast: active), (-ms-high-contrast:
none
) {
/* IE10-specific styles go here */
}
|
条件编译支持全部版本的ie浏览器，而其它浏览器不支持。可是颇有可能之后IE11出来后，这种方法就失效了。。。app
须要注意的是，条件编译不支持Windows store中的app中使用，只支持在IE浏览器中使用。spa
固然，咱们也能够用传统的用ua给ie10中html元素添加class的方法来实现。code
方法二：@media -ms-high-contrast
IE10支持媒体查询，而后也支持-ms-high-contrast这个属性，因此，咱们能够用它来hack ie10：orm
if (window.matchMedia(
"screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"
).matches) {
document.documentElement.className +=
"ie10"
;
}
|
这种写法能够适配到高对比度和默认模式。因此能够覆盖到全部ie10的模式了。htm
而后这种方式可能也会在后面的IE11中生效。ip
固然，方法二也能够和方法一一块儿用：
@media
screen
and (
min-width
:
0
\
0
) {
/* 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
:
#CCC
\
9
;
color
:
#3FC
\
0
;}
|
文章内容整理自：http://www.impressivewebs.com/ie10-css-hacks/ http://www.ifrans.cn/css-hack/