IE10/11不支持条件性注释后的替代方法

专门针对IE的条件性注释(Conditional comments)是个很奇葩的东西，它是专门给IE浏览器准备的，因为其它浏览器根本不能识别这种标记。之所以需要这种东西，是因为IE实现的网页渲染效果和其它浏览器又很多出入，使用条件性注释可以区别对待的针对浏览器编写CSS等代码。

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->
<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->
<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->
<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->

但当IE的版本到到达10/11后，开始不支持这种条件性注释(MSDN上的说明)。

说来也合情合理，从IE9开始，IE开始被WEB开发人员接受，很多人将IE9后的浏览器和火狐、谷歌浏览器统称为现代浏览器，因为它们开始实现新的HTML5和CSS3统一标准。但愿望是美好的，现实却是残酷的，很多WEB开发人员在开发实践中发现，同一个CSS在IE9/10/11上显示的效果和其它浏览器渲染的效果还是不一样。也就是说，我们还是需要条件性注释。

那么，在不支持条件性注释的IE10/11上，如何实现条件性注释的效果呢？

方法一：使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术

IE9是支持条件性注释的。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

在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里条件性注释的替代效果，各有各的使用场景，我们根据软件的运行环境来选择使用哪一种。

欢迎提出意见。

阅读余下内容

标签：