整理自:http://www.impressivewebs.com/ie10-css-hacks/
中文原文: IE10 CSS hack
传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的,有些不确定是否是ie10引出的bug,所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。
首先,ie10不支持条件注释了。
方法一:特性检测:@cc_on
这个是ie10新引入的私有语句,叫做条件编译(conditional compilation),用于javascript。使用了之后注释中的js也会被解析:
<!--[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 */
}
好吧,其实不知道IE11会不会继续支持这个私有语句,如果是的话,就比较难区分IE10和IE11了。
需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE10浏览器中使用。
当然,我们也可以用传统的用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多写一句代码。。。
分享到:
相关推荐
有IE就有hack,看看IE9的css hack,IE8的css hack;上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。 google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用...
ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的css hack大家了解吗? 去年微软宣布,win8的Metro版IE10将不再支持插件,并且不再支持条件注释,这显然是一个冒险的举动。截至到现在,在...
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
CSS布局资料:IE5、IE6、IE7、IE8 的CSS HACK兼容列表
css hack ie6 ie7 ie8 firefox等浏览器兼容性
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
important,以至于常常被人误用做识别IE6的hack。可是,大家注意一 下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:...
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
针对firefox ie6 ie7 ie8的css样式hack
CSS Hack 浏览器兼容文档 ,用于兼容IE6、IE7、IE8、IE9、FF
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下,需要的朋友可以学习下
解决ie6、ie7、ie8浏览器的css hack 兼容问题
技术资料\区分IE6,IE7和firefox的CSS hack-CSS教程.doc
css hack 兼容性的总结与体会. IE6,IE7,IE8,IE9,firefox,apple,chrome等等浏览器的兼容性
区别IE8浏览器的CSS hack.docx
不同浏览器、不同版本存在css的差异,CSS hack可以兼容,主要针对ie浏览器
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。... CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。