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 /
titleJS 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 .example {
/* IE10-only styles go here */
}
条件编译支持所有版本的ie浏览器,而其它浏览器不支持 。但是很有可能以后IE11出来后,这种方法就失效了 。。。
需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用 。
当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现 。
不像其他的解决方案,在这种方法中,实际上是依赖于JavaScript,所以从另一个角度来看,我们是反对的 。
当然有人已经发布的改进的版本,这个检测功能,将不包括IE11,并不需要条件注释 。然而它会引发eval is eviljs警告报错信息 。
下面是演示:
在这里,我创建了一个替代版本不具备的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 /
titleJS 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的份额,这种情况可能不会发生吧 。
推荐阅读
- IE9、IE10、IE11 教你通过命令行完美完全的卸载IE浏览器
- IE与Firefox的CSS兼容大全 推荐
- IE与fox好多不兼容的问题 div+css学习笔记
- win7如何卸载ie10 WIN7怎样卸载IE10恢复到IE8或者是IE9图文教程
- ie10打开网页慢 提高IE10打开网页速度设置方法
- IE10打开链接时的默认启动方式设置教程
- 图文教程 设置IE10浏览器的安全级别的详细方法
- 通过注册表实现 如何阻止Internet Explorer更新为IE10
- VS2013安装失败提示需要IE10该怎么办?
- IE10浏览器flash不显示原因分析及解决