IE10/11不支持条件性注释的3个解决方法

针对IE的条件性注释(Conditional comments)是专门给IE浏览器准备的，其它浏览器根本不能识别这种标记。使用条件性注释可以区别对待的针对浏览器编写CSS等代码。

<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>

但当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浏览器，如果是，就在页面的<html>标记上添加一个“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。在这里：

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

</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 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";
}

实例：

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS 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 ，浏览器，注释， ie ，代码属性 ie10不支持js、ie10不支持html5、cognos不支持ie10、win7不支持ie10、ie10不支持哪些js，以便于您获取更多的相关知识。

IE10/11不支持条件性注释的3个解决方法相关推荐

Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法，错误
Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法,错误参考文章: (1)Missing artifact com ...
mysql 5.6升级8.0_Mysql数据库从5.6.28版本升到8.0.11版本部署项目时遇到的问题及解决方法...
MysqL数据库版本从5.6.28升到8.0.11过程中部署项目时遇到的问题和解决方法,具体介绍如下所示: 首先这个项目用到了hibernate4.2.0,链接MysqL5.6.28没问题,换到8.0 ...
可访问性不一致的原因与解决方法
出现原因,其中一个是返回参数的访问级别小于函数的访问级别,也就是说当定义一个返回参数的方法的时候,如果返回参数的访问级别低于方法的访问级别,此时就会出现这样的错误.如果返回的参数不能被访问,那么定义的 ...
Android R 11 后台定位权限没有始终允许选项的解决方法
在接入百度定位SDK 时,看到文档上说要注意android 11的权限相关问题,果然是个坑,在Android 10 11 上都出现一些问题,本文记录解决 android 11 定位权限问题的方法申请 ...
VScode注释中文时乱码怎么办？VScode中文注释乱码问题的解决方法
当我们在编写C语言代码的时候,会对代码进行中文的注释,但是使用VScode打开代码之后,部分的中文注释会出现乱码的情况,对此找到了几个解决中文注释乱码的方法,分享给大家,希望可以对大家的学习带来帮助. ...
unc 目录不受支持_DOS批处理不支持将UNC 路径作为当前目录的解决方法
废话少说,直接上代码,打开网上邻居→整个网络→Microsofi Windows Network→在工作组找到本机对应的电脑,双击测试以下批处理代码: 显示当前目录.bat cd /d %~dp0 e ...
Mysql数据库从5.6.28版本升到8.0.11版本部署项目时遇到的问题及解决方法
这篇文章主要介绍了Mysql数据库从5.6.28版本升到8.0.11版本过程中遇到的问题及解决方法,解决办法有三种,每种方法给大家介绍的都很详细 mysql数据库版本从5.6.28升到8.0.11过程 ...
.net OCX 无法获取“****”控件的窗口句柄，不支持无窗口的ActiveX控新解决方法...
2019独角兽企业重金招聘Python工程师标准>>> 朋友找我帮原来的软件加一个小功能,程序是用VB.NET 写的. 软件需要与外部串口设备通信,一只带串口功能的压力表. 应该时间 ...
java 不支持fork,grails不能运行fork模式解决方法
升级到grails 2.3.2之后,运行时报如下的异常: Exception in thread "main" Error | Forked Grails VM exited wi ...

IE10/11不支持条件性注释的3个解决方法

IE10/11不支持条件性注释的3个解决方法相关推荐

最新文章

热门文章