最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
IE10/11不支持条件性注释的3个解决方法
时间:2022-06-25 13:37:52 编辑:袖梨 来源:一聚教程网
针对IE的条件性注释(Conditional comments)是专门给IE浏览器准备的,其它浏览器根本不能识别这种标记。使用条件性注释可以区别对待的针对浏览器编写CSS等代码。
但当IE的版本到到达10/11后,开始不支持这种条件性注释(MSDN上的说明)。
说
来也合情合理,从IE9开始,IE开始被WEB开发人员接受,很多人将IE9后的浏览器和火狐、谷歌浏览器统称为现代浏览器,因为它们开始实现新的
HTML5和CSS3统一标准。但愿望是美好的,现实却是残酷的,很多WEB开发人员在开发实践中发现,同一个CSS在IE9/10/11上显示的效果和
其它浏览器渲染的效果还是不一样。也就是说,我们还是需要条件性注释。
那么,在不支持条件性注释的IE10/11上,如何实现条件性注释的效果呢?
方法一:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术
IE9是支持条件性注释的。
在html网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像IE6/7/8那样编写针对性的CSS代码了。但这样做有个弊端,很显然,浏览器这样就会才能IE9的渲染模式,而不是最新的IE10/11技术。
方法二:使用媒体查询语句+-ms-high-contrast属性
CSS
的媒体查询语句(media
query)是一种高级的CSS条件语句,它能根据一些属性和属性值计算判断CSS是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就
是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的CSS,从而实现了条件性执行的效果。
方法三:使用Javascript判断浏览器的类型
先用JavaSCript判断是否是IE浏览器,如果是,就在页面的标记上添加一个“ie”的类名:
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
document.documentElement.className += " ie";
}
有了这个标志性css class后,我们就可以在CSS里区别性的编写css代码了。
.testClass{
/*这里写通用的css*/
}
.ie .testClass{
/*这里写专门针对IE的css*/
}
这三种方法都能实现在IE10/11里条件性注释的替代效果,各有各的使用场景,我们根据软件的运行环境来选择使用哪一种。
ie10 css hack 条件注释等兼容方式整理
方法一:特性检测:@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里:
代码如下:
请注意/*@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 evil”js警告报错信息。
下面是演示:
在这里,我创建了一个替代版本不具备的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";
}
实例:
代码如下:
方法三:@media 0
这个有些变态了,而且不太完美,因为IE9也支持media,也支持 的hack:
代码如下:
@media screen and (min-width:0 ) {
/* IE9 and IE10 rule sets go here */
}
不过,估计后面ie10也会普及到Windows 7平台,所以ie9会消失,只是看看ie8和ie7的份额,这种情况可能不会发生吧。
相关文章
- 光遇12.4大蜡烛在哪里 12-04
- 重返未来1999芭卡洛儿怎么样 12-04
- 无限暖暖心愿金蔷薇怎么样 12-04
- 王者荣耀星之破晓先遣测试停服 12-04
- 光遇12.4大蜡烛在哪里 光遇12月4日大蜡烛位置攻略 12-04
- 无限暖暖公测兑换码有哪些 无限暖暖公测版本兑换码介绍 12-04