前端备忘录 — IE 的条件注释

CSS hack

由于不同厂商的浏览器，比如 Internet Explorer，Safari，Mozilla Firefox， Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，这便是 CSS hack。

简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果。

由于 IE 的 "臭名昭著" 以及其他主流浏览器对于 CSS 标准的支持日渐完善，说到 CSS hack，一般指的就是 IE 的 CSS hack。

CSS hack 主要有三种方式：

类内属性前缀法

选择器前缀法

IE 的条件注释

今天我们要讲的是 IE 的条件注释。

IE 条件注释

很多人并不喜欢把 IE 的条件注释（Conditional comments）算作 CSS hack，也是有一定道理的，条件注释的内容并不一定与 CSS 有关（还可以是 JavaScript，HTML 等）。

条件注释的使用方法非常简单，满足一定的条件（通常是该 IE 浏览器的版本满足一定条件），随即执行注释里的代码。当然，只有 IE 浏览器的某些版本会 "认识" 这些注释，对于其他的浏览器来说，是跟普通注释一样忽略的。

用条件注释，我们可以实现不同浏览器加载不同的 CSS 样式表，或者不同浏览器显示不同的页面内容。



比如上图（截图来自 https://www.hao123.com/)，针对 IE6 - IE9，分别设置了样式。

关于条件注释我们还需要了解的几点有：

IE 中的条件注释对 IE 的版本和 IE 非 IE 有优秀的区分能力，是 WEB 设计中常用的 hack 方法

条件注释只能用于 IE6、IE7、IE8、IE9（https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx）

条件注释的基本结构和 HTML 的注释(<!– –>)是一样的。因此 IE 以外的浏览器将会把它们看作是普通的注释而完全忽略它们

IE 将会根据 if 条件来判断是否如解析普通的页面内容一样解析条件注释里的内容

条件注释属性：

gt

: greater than，选择条件版本以上版本，不包含条件版本

lt

: less than，选择条件版本以下版本，不包含条件版本

gte

: greater than or equal，选择条件版本以上版本，包含条件版本

lte

: less than or equal，选择条件版本以下版本，包含条件版本

!

: 选择条件版本以外所有版本，无论高低

&

：并

|

：或

()

：子表达式

具体使用举例：

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Read More：

IE条件注释摘要 #75

史上最全的CSS hack方式一览

IE 条件注释

About conditional comments