标签：

<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。在这里：

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

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