css判断ie版本才引用样式或css文件
Ydgent 2018-04-17
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]--> <!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
如:
<!--[if IE 9]> <link rel="stylesheet" type="text/css" href="ie9.css"/> <![endif]-->
或
<!--[if IE 9]>
<style>
.header-menu>li{
color:#fff;
}
</style>
<![endif]-->IE10/11不支持条件性注释后的
替代方法
专门针对IE的条件性注释(Conditional comments)是个很奇葩的东西，它是专门给IE浏览器准备的，因为其它浏览器根本不能识别这种标记。之所以需要这种东西，是因为IE实现的网页渲染效果和其它浏览器又很多出入，使用条件性注释可以区别对待的针对浏览器编写CSS等代码。
- <span class="token comment"><!--[if IE]>
- <link href="ie.css" rel="stylesheet">
- <![endif]--></span>
- <span class="token comment"><!--[if IE6]>
- <style type="text/css">
- /* styles for IE6 goes here */
- </style>
- <![endif]--></span>
- <span class="token comment"><!--[if lt IE7]>
- <style type="text/css">
- /* styles for IE7 goes here */
- </style>
- <![endif]--></span>
- <span class="token comment"><!--[if lte IE8]>
- <style type="text/css">
- /* styles for IE8 goes here */
- </style>
- <![endif]--></span>
- <span class="token comment"><!--[if gt IE9]>
- <style type="text/css">
- /* styles for IE9 goes here */
- </style>
- <![endif]--></span>
- <span class="token comment"><!--[if gte IE9]>
- <style type="text/css">
- /* styles for IE9 goes here */
- </style>
- <![endif]--></span>
- <span class="token comment"><!--[if !IE]> --></span>
- <span class="token style language-css"><span class="token tag" style="color:rgb(153,0,85);"><span class="token tag"><span class="token punctuation" style="color:rgb(153,153,153);"><</span>style</span> <span class="token attr-name" style="color:rgb(102,153,0);">type</span><span class="token attr-value" style="color:rgb(0,119,170);"><span class="token punctuation" style="color:rgb(153,153,153);">=</span><span class="token punctuation" style="color:rgb(153,153,153);">"</span>text/css<span class="token punctuation" style="color:rgb(153,153,153);">"</span></span><span class="token punctuation" style="color:rgb(153,153,153);">></span></span>
- <span class="token comment">/* styles goes here but should not appear in IE5-9 */</span>
- <span class="token tag" style="color:rgb(153,0,85);"><span class="token tag"><span class="token punctuation" style="color:rgb(153,153,153);"></</span>style</span><span class="token punctuation" style="color:rgb(153,153,153);">></span></span></span>
- <span class="token comment"><!-- <![endif]--></span>
但当IE的版本到到达10/11后，开始不支持这种条件性注释(MSDN上的说明)。
说来也合情合理，从IE9开始，IE开始被WEB开发人员接受，很多人将IE9后的浏览器和火狐、谷歌浏览器统称为现代浏览器，因为它们开始实现新的HTML5和CSS3统一标准。但愿望是美好的，现实却是残酷的，很多WEB开发人员在开发实践中发现，同一个CSS在IE9/10/11上显示的效果和其它浏览器渲染的效果还是不一样。也就是说，我们还是需要条件性注释。
那么，在不支持条件性注释的IE10/11上，如何实现条件性注释的效果呢？
方法一：使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术
IE9是支持条件性注释的。
- <span class="token tag" style="color:rgb(153,0,85);"><span class="token tag"><span class="token punctuation" style="color:rgb(153,153,153);"><</span>meta</span> <span class="token attr-name" style="color:rgb(102,153,0);">http-equiv</span><span class="token attr-value" style="color:rgb(0,119,170);"><span class="token punctuation" style="color:rgb(153,153,153);">=</span><span class="token punctuation" style="color:rgb(153,153,153);">"</span>X-UA-Compatible<span class="token punctuation" style="color:rgb(153,153,153);">"</span></span> <span class="token attr-name" style="color:rgb(102,153,0);">content</span><span class="token attr-value" style="color:rgb(0,119,170);"><span class="token punctuation" style="color:rgb(153,153,153);">=</span><span class="token punctuation" style="color:rgb(153,153,153);">"</span>IE<span class="token punctuation" style="color:rgb(153,153,153);">=</span>EmulateIE9<span class="token punctuation" style="color:rgb(153,153,153);">"</span></span><span class="token punctuation" style="color:rgb(153,153,153);">></span></span>
在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，使用下面的媒体查询语句：
- <span class="token atrule" style="color:rgb(0,119,170);"><span class="token rule">@media</span> all and <span class="token punctuation" style="color:rgb(153,153,153);">(</span><span class="token property" style="color:rgb(153,0,85);">-ms-high-contrast</span><span class="token punctuation" style="color:rgb(153,153,153);">:</span> none<span class="token punctuation" style="color:rgb(153,153,153);">)</span>, <span class="token punctuation" style="color:rgb(153,153,153);">(</span><span class="token property" style="color:rgb(153,0,85);">-ms-high-contrast</span><span class="token punctuation" style="color:rgb(153,153,153);">:</span> active<span class="token punctuation" style="color:rgb(153,153,153);">)</span></span> <span class="token punctuation" style="color:rgb(153,153,153);">{</span>
- <span class="token comment">/* IE10+ CSS styles go here */</span>
- <span class="token punctuation" style="color:rgb(153,153,153);">}</span>
火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行的效果。
方法三：使用Javascript判断浏览器的类型
先用JavaSCript判断是否是IE浏览器，如果是，就在页面的<html>标记上添加一个“ie”的类名：
- <span class="token keyword" style="color:rgb(0,119,170);">var</span> ms_ie <span class="token operator" style="color:rgb(166,127,89);">=</span> <span class="token keyword" style="color:rgb(0,119,170);">false</span><span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token keyword" style="color:rgb(0,119,170);">var</span> ua <span class="token operator" style="color:rgb(166,127,89);">=</span> window<span class="token punctuation" style="color:rgb(153,153,153);">.</span>navigator<span class="token punctuation" style="color:rgb(153,153,153);">.</span>userAgent<span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token keyword" style="color:rgb(0,119,170);">var</span> old_ie <span class="token operator" style="color:rgb(166,127,89);">=</span> ua<span class="token punctuation" style="color:rgb(153,153,153);">.</span><span class="token function" style="color:rgb(221,74,104);">indexOf</span><span class="token punctuation" style="color:rgb(153,153,153);">(</span><span class="token string" style="color:rgb(102,153,0);">'MSIE '</span><span class="token punctuation" style="color:rgb(153,153,153);">)</span><span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token keyword" style="color:rgb(0,119,170);">var</span> new_ie <span class="token operator" style="color:rgb(166,127,89);">=</span> ua<span class="token punctuation" style="color:rgb(153,153,153);">.</span><span class="token function" style="color:rgb(221,74,104);">indexOf</span><span class="token punctuation" style="color:rgb(153,153,153);">(</span><span class="token string" style="color:rgb(102,153,0);">'Trident/'</span><span class="token punctuation" style="color:rgb(153,153,153);">)</span><span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token keyword" style="color:rgb(0,119,170);">if</span> <span class="token punctuation" style="color:rgb(153,153,153);">(</span><span class="token punctuation" style="color:rgb(153,153,153);">(</span>old_ie <span class="token operator" style="color:rgb(166,127,89);">></span> <span class="token operator" style="color:rgb(166,127,89);">-</span><span class="token number" style="color:rgb(153,0,85);">1</span><span class="token punctuation" style="color:rgb(153,153,153);">)</span> <span class="token operator" style="color:rgb(166,127,89);">||</span> <span class="token punctuation" style="color:rgb(153,153,153);">(</span>new_ie <span class="token operator" style="color:rgb(166,127,89);">></span> <span class="token operator" style="color:rgb(166,127,89);">-</span><span class="token number" style="color:rgb(153,0,85);">1</span><span class="token punctuation" style="color:rgb(153,153,153);">)</span><span class="token punctuation" style="color:rgb(153,153,153);">)</span> <span class="token punctuation" style="color:rgb(153,153,153);">{</span>
- ms_ie <span class="token operator" style="color:rgb(166,127,89);">=</span> <span class="token keyword" style="color:rgb(0,119,170);">true</span><span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token punctuation" style="color:rgb(153,153,153);">}</span>
- <span class="token keyword" style="color:rgb(0,119,170);">if</span> <span class="token punctuation" style="color:rgb(153,153,153);">(</span> ms_ie <span class="token punctuation" style="color:rgb(153,153,153);">)</span> <span class="token punctuation" style="color:rgb(153,153,153);">{</span>
- document<span class="token punctuation" style="color:rgb(153,153,153);">.</span>documentElement<span class="token punctuation" style="color:rgb(153,153,153);">.</span>className <span class="token operator" style="color:rgb(166,127,89);">+</span><span class="token operator" style="color:rgb(166,127,89);">=</span> <span class="token string" style="color:rgb(102,153,0);">" ie"</span><span class="token punctuation" style="color:rgb(153,153,153);">;</span>
- <span class="token punctuation" style="color:rgb(153,153,153);">}</span>
有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。
- <span class="token selector" style="color:rgb(102,153,0);">.testClass</span><span class="token punctuation" style="color:rgb(153,153,153);">{</span>
- <span class="token comment">/*这里写通用的css*/</span>
- <span class="token punctuation" style="color:rgb(153,153,153);">}</span>
- <span class="token selector" style="color:rgb(102,153,0);">.ie .testClass</span><span class="token punctuation" style="color:rgb(153,153,153);">{</span>
- <span class="token comment">/*这里写专门针对IE的css*/</span>
- <span class="token punctuation" style="color:rgb(153,153,153);">}</span>
这三种方法都能实现在IE10/11里条件性注释的替代效果，各有各的使用场景，我们根据软件的运行环境来选择使用哪一种。
延伸阅读：
“浏览器内核”主要指渲染引擎(Rendering Engine)，负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。因此，所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同，因此同一网页在不同的内核浏览器里的渲染、展示效果也可能不同。
浏览器内核种类繁多，商用的加上非商业的免费内核，大约会超过10款，我们今天重点看一下目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto。
一、Trident内核（代表：Internet Explorer）
说起Trident，很多人都会感到陌生，但提起IE(Internet Explorer)则无人不知无人不晓，由于其被包含在全世界使用率最高的操作系统Windows中，得到了极高的市场占有率，所以我们又经常称其为IE内核。
Trident(又称为MSHTML)，是微软开发的一种排版引擎。它在1997年10月与IE4一起诞生，一直在被不断地更新和完善。而且除IE外，许多产品都在使用Trident核心，比如Windows的Help程序、RealPlayer、Windows Media Player、Windows Live Messenger、Outlook Express等等都使用了Trident技术。
Trident实际上是一款开放的内核，Trident引擎被设计成一个软件模块，使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里，其接口内核设计相当成熟，因此涌现出许多采用IE内核而非IE的浏览器，但是Trident只能用于Windows平台。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko内核（代表：Mozilla Firefox）
Gecko是开放源代码、以C++编写的网页排版引擎，目前被Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。由于Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，采用Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。
Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用，例如网页浏览器、HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品，如Netscape和Mozilla Firefox，但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。
正在和曾经使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。Google Gadget引擎采用的就是Gecko浏览器引擎。
WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)，WebKit最初的代码来自KDE的KHTML和KJS(它们均为开放源代码，都是自由软件，在GPL协议下授权)。所以WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。 WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。
四、Presto内核（代表：Opera）
Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。Presto是商业引擎，了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。
