浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE动态 /ie10 css hack 条件注释等兼容方式整理

ie10 css hack 条件注释等兼容方式整理

2023-06-25 21:00:02 编辑:匿名

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,也支持⁄0的hack:

复制代码代码如下:
@media screen and (min-width:0⁄0) {
/* IE9 and IE10 rule sets go here */
}

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

结束语
事实是,你不应该使用css hack针对IE10浏览器,甚至是IE9浏览器。使用一个很好的CSS工作流程,在编写代码时,应用良好的原则。
而在大多数情况下,当不同的,你应该能功能检测,以填补空白,或者使用优美的退化允许接受的经验IE10。
如果任何人有任何其他的关于ie10 css hack的相关信息,或知道任何其他的针对IE10的条件注释方法,欢迎更新相应的方法。

相关推荐

浏览器更新