IE10 CSS hack
整理自:http://www.impressivewebs.com/ie10-css-hacks/
中文原文: IE10 CSS hack
请尊重版权,转载请注明来源,多谢~~
传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的,有些不确定是否是ie10引出的bug,所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。
首先,ie10不支持条件注释了。
方法一:特性检测:@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:
.ie10 .example {
/* IE10-only styles go here */
}
条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。
需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。
当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。
方法二:@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";
}
方法三:@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的份额,这种情况可能不会发生吧。。。
总结:
我不想给ie写hack,嗯,不想为ie多写一句代码。。。
建议继续学习:
- 简单的全系列浏览器css hack (阅读:4630)
- IE 颜色 Hack全收集 (阅读:4018)
- 前端设计中的浏览器CSS Hack汇总 (阅读:2772)
- IE10 CSS Hack(顺便聊聊IE11的CSS Hack) (阅读:1737)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:神飞 来源: 前端观察
- 标签: hack IE10
- 发布时间:2012-12-05 13:08:04
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成