标签：

<div style="width:735px; height:405px;">

<div class="mainFloat"></div>

</div>


样式：

.mainFloat {

width:725px;

height:395px;

border:#78a5c2 solid 5px;

padding:0;

overflow-y:hidden;

overflow-x:hidden;

}


这些样式在火狐，谷歌，IE6-IE9都很正常，唯独在IE10下.mainFloat这个div出现了很难看的滚动条，发现该div的父级的宽和高在IE10下是725px和395px,也就是比其他的浏览器少了10px，我想着这是个IE10hack.

以下是我的解决方法：

.mainFloat {

width:725px;

height:395px;

border:#78a5c2 solid 5px;

padding:0;

overflow-y:hidden;

overflow-x:hidden;

}

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

.mainFloat { width:715px; height:385px; }

}



从上面这个hack中，我学到两个解决IE10下hack的方法，特跟大家分享。

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

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

在CSS中直接写明就可以，如以上例子：

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

.mainFloat { width:715px; height:385px; }

}


方法二：特性检测：@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：该脚本里面的IE排除条件注释，以确保IE6-9不承认它，然后它功能检测到了名为@ cc_on。在这里：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</body>
</html>

请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10的样式可以写在这个选择器下： 

.ie10 .mainFloat{
/* IE10-only styles go here */
width:715px;
height:385px;
}