您的位置：首页 > 其它

IE10浏览器的hack解决方法

2013-09-26 16:36 351 查看

标签：
<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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航