原文：ie浏览器 条件注释，根据不同版本引入不同js
IE10/11不支持条件性注释的3个解决方法

一、ie浏览器 条件注释，根据不同版本引入不同js

ie浏览器，真心佩服ie，各种版本，浏览器的显示不同。

关于jQuery lib对ie的兼容性

ie1.9版本，是对ie8的最后兼容。
也就是说jQuery2.0以下版本的都支持ie8，但是2.0以上（包含2.0版本）的jQuery库已经全面放弃了ie8浏览器。
如果你的用户包含ie8用户，恰好你的项目中又引用了高版本的jq，那就需要对ie8进行判断。
根据不同的版本，引入高低版本的jq库。

ie条件注释

条件注释是层叠样式表（CSS）用于区分IE特定版本的首选方式。
重要提示 自IE10起，标准模式不再支持条件注释。而是采用特征检测给浏览器不支持的功能来提供备用策略。

  • expression是由功能、操作符和值组成的，下图是支持的功能，并介绍了每个功能支持的值。

    ie浏览器 条件注释 - 图1
    ｅ１.png
  • 也可以添加表达式哦

    ie浏览器 条件注释 - 图2
    ｅ２1.png
  • 举个栗子：
    如果是ie8就引入1.9版本的jqueryLib，如果不是就引入其他版本的jqueryLib
  1. <!--[if IE 8]>
  2.         <script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script> 
  3.      <![endif]-->
  5.      <!--[if !(IE 8)]>
  6.         <script  src="./WeChat/esmart/QU/js/jquery.js" ></script>   
  7.      <![endif]-->

如果判断不是的话，记得加个!(IE n)
Downlevel-hidden条件注释类似于基本的HTML注释，包含连字符（“ - ”）在开启和关闭标签。条件显示在标签的开口部，和[ENDIF]被放置在标签的封闭部分之前。内容放在注释标签内。
因为前四个字符和注释的最后三个字符是相同的HTML注释元素，所以低版本浏览器会忽略注释块内的HTML内容。由于内容被有效地不支持条件注释的浏览器隐藏，这种类型的条件注释被称为低版本隐藏。
如果条件表达式的结果为真，则对注释块里面的内容进行分析，并通过Internet Explorer 5及更高版本的渲染。针对Internet Explorer而专门设计的内容，这种做法特别有效。

  • 更多栗子如下：
  1. <!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
  2. <![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
  3. <!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
  4. <!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
  5. <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
  6. <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
  7. <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
  8. <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
  9. <!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
  10. <![if false]>You are using a <em>downlevel</em> browser.<![endif]>
  11. <!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![en

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

针对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。在这里：

代码如下:

<!DOCTYPE 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>







方法三：@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，以便于您获取更多的相关知识。