ie10 css hack 条件注释等兼容方式整理
ie10 css hack 条件注释等兼容方式整理
发布时间:2016-12-27 来源:查字典编辑
摘要:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的csshack大家了解吗?去年微软宣布,win8的Metro...

ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的css hack大家了解吗?

去年微软宣布,win8的Metro版IE10将不再支持插件,并且不再支持条件注释,这显然是一个冒险的举动。截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决。

ps:条件注释是一种安全的区分IE浏览器版本的语法,且被认为是取代针对IE css hack的首选办法。

但是,如果IE10不再支持条件注释,我们唯一的选择只能针对css的问题用css hack或者判断浏览器来解决 我们当然不希望试用后者。

有趣的是,国外已经出现了牛人的解决方法,当然不是专门使用一个css hack 解决问题的的代码片段。下面是给出这三项技术的总结,以供参考。

方法一:特性检测:@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>

<<script>

if (/*@cc_on!@*/false) {

document.documentElement.className+=' ie10';

}

</script><>

</body>

</html>

请注意/*@cc_on ! @*/中间的这个感叹号。

这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:

.ie10 .example {

/* IE10-only styles go here */

}

条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。

需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。

当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。

不像其他的解决方案,在这种方法中,实际上是依赖于JavaScript,所以从另一个角度来看,我们是反对的。

当然有人已经发布的改进的版本,这个检测功能,将不包括IE11,并不需要条件注释。然而它会引发““eval is evil”js警告报错信息。

下面是演示:

在这里,我创建了一个替代版本不具备的eval警告:

http://jsbin.com/okuzut/2/edit

您也可以尝试,这只是打印出当前的IE版本,这个版本没有测试:

http://jsbin.com/okuzut/1/edit

但是,这似乎在IE8错误,读为“IE5”,直到您刷新页面,非常奇怪。

方法二:@media -ms-high-contrast

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

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

/* IE10-specific styles go here */

}

这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。

然后这种方式可能也会在后面的IE11中生效。

当然,方法二也可以和方法一一起用:

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

document.documentElement.className += "ie10";

}

实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

</body>

</html>

方法三:@media 0

这个有些变态了,而且不太完美,因为IE9也支持media,也支持的hack:

@media screen and (min-width:0) {

/* IE9 and IE10 rule sets go here */

}

不过,估计后面ie10也会普及到Windows 7平台,所以ie9会消失,只是看看ie8和ie7的份额,这种情况可能不会发生吧。

结束语

事实是,你不应该使用css hack针对IE10浏览器,甚至是IE9浏览器。使用一个很好的CSS工作流程,在编写代码时,应用良好的原则。

而在大多数情况下,当不同的,你应该能功能检测,以填补空白,或者使用优美的退化允许接受的经验IE10。

如果任何人有任何其他的关于ie10 css hack的相关信息,或知道任何其他的针对IE10的条件注释方法,欢迎更新相应的方法。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类