传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的,有些不确定是否是ie10引出的bug,所以惯性思维让我们重新寻找针对IE10的CSS Hack。
首先,ie10不支持条件注释了。前端UI分享
一、特性检测:@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。
google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。
1
2
3
4
5
|
<!--[ if !IE]><!--><script>
if ( /*@cc_on!@*/ false ) {
document.documentElement.className+= ' ie10' ;
} </script><!--<![endif]--> |
请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:
1
2
3
|
.ie 10 .example {
/* IE10-only styles go here */
} |
这是ie10标准模式下的截图:前端UI分享
这是ie10,IE8模式下的截图:
条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。
需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。
当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。
方法二:@media -ms-high-contrast
IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10:
1
2
3
|
if (window.matchMedia( "screen and (-ms-high-contrast: active), (-ms-high-contrast: none)" ).matches) {
document.documentElement.className += "ie10" ;
} |
这种写法可以适配到高对比度和默认模式,所以可以覆盖到所有ie10的模式了,然后这种方式可能也会在后面的IE11中生效。
当然,方法二也可以和方法一一起用:前端UI分享
1
2
3
|
@media screen and ( min-width : 0 \ 0 ) {
/* IE9 and IE10 rule sets go here */
} |
不过,估计后面ie10也会普及到Windows 7平台,所以ie9会消失,只是看看ie8和ie7的份额,这种情况可能不会发生吧。。。
三、@media 0 方法
这个方法不是太完美,因为IE9和预览版的IE11也支持media和\0的hack。
1
2
3
|
@media screen and ( min-width : 0 \ 0 ) {
/* IE9 , IE10 ,IE11 rule sets go here */
} |
总结:
我不想给ie写hack,嗯,不想为ie多写一句代码。。。
相关推荐
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
针对firefox ie6 ie7 ie8的css样式hack
有IE就有hack,看看IE9的css hack,IE8的css hack;上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。 google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用...
CSS布局资料:IE5、IE6、IE7、IE8 的CSS HACK兼容列表
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
css hack ie6 ie7 ie8 firefox等浏览器兼容性
important,以至于常常被人误用做识别IE6的hack。可是,大家注意一 下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:...
这个问题一直困扰我很久,不过,今天我终于搞明白了,也独创了一个能hack IE8、IE9、IE11这三个浏览器的代码写法模式,本文将与各位分享。 \9和\0为什么可能hack IE11\IE9\IE8无效? 可能很多人都略明白,\0是用来
ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的css hack大家了解吗? 去年微软宣布,win8的Metro版IE10将不再支持插件,并且不再支持条件注释,这显然是一个冒险的举动。截至到现在,在...
解决ie6、ie7、ie8浏览器的css hack 兼容问题
CSS Hack 浏览器兼容文档 ,用于兼容IE6、IE7、IE8、IE9、FF
汇总下IE各版本的css_hack.让浏览器正确的读取到自己看得懂得CSS语法
介绍了10个很实但IE却不支持的CSS属性,列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的,就更有针对性的去编写CSS和Hack了
技术资料\区分IE6,IE7和firefox的CSS hack-CSS教程.doc
区别IE8浏览器的CSS hack.docx
css hack 兼容性的总结与体会. IE6,IE7,IE8,IE9,firefox,apple,chrome等等浏览器的兼容性