前端备忘录 — 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