【译】条件注释（ conditional comment）

原文（译者在原文基础上添加了部分内容）：https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

参考：微软官方文档：About conditional comments（强烈建议亲自看一下微软官方文档）

这篇文章更新自一篇旧文（原来是 2007 年 9 月 24 日）。我只是想扩展这篇旧文并解释得更清楚一些。

原文中有两个术语：条件注释conditional comment（貌似这个更加符合其意义）、条件样式表conditional stylesheet

如果你愿意阅读这篇博客，那么你 99% 是在 IE 上有过烦躁到抓头发的经历。But if you are worth your salt as a CSS coder，你应该可以处理这种问题。我的观点是：即使不使用 hack，你也可以处理 IE 抛给你的任何问题。hack 是危险的，因为 hack 基于非标准的漏洞，你无法预测这些 hack 在未来的浏览器上会表现成什么样子。处理 IE 问题的首选工具是条件样式表（conditional stylesheet）。IE 提供了注释标签，支持指定特定的版本（从更低版本一直到 IE 8），也支持一次性指定多个版本（高于greater than某个版本或低于less than某个版本）（译者注：这篇文章是 2010年 1 月 20 日写的）。

1. 为什么使用条件样式表（conditional stylesheet）？

• You got problems, they need fixin'
• Keeps your code hack-free and valid（让你的代码免于使用 hack 方法，并在未来的浏览器中保持有效）
• Keeps your main stylesheet clean（让你的主样式表保持纯净）
• Perfectly acceptable technique, sanctioned by Microsoft（这是完全可以接受的技术，是微软认可的）

记住，这些条件样式表不仅仅可以用于 CSS，你可以用来加载 JavaScript，甚至可以在网站的内容中用来显示特殊的 仅用于 IE 的信息。

2. 代码

这 与所有其他的常规外联 CSS 文件一样 放在 标签中。你应该很熟悉它的开始标签和结束标签，它们只是常规的 HTML 注释。然后就是，中括号里的 if 和 IE，它们的意思很明显了吧，不用我多说了。需要注意的语法是：! 代表 not，所以 !IE 表示 not IE。gt 表示 greater than，gte 表示 greater than or equal，lt 表示 less than，lte 表示 less than or equal。

注意：IE 10 及以上版本不支持条件注释（conditional comment）

针对所有版本的 IE（Target ALL VERSIONS of IE）

针对除了 IE 之外的所有浏览器（Target everything EXCEPT IE）

只针对 IE 7（Target IE 7 ONLY）

只针对 IE 6（Target IE 6 ONLY）

只针对 IE 5（Target IE 5 ONLY）

只针对 IE 5.5（Target IE 5.5 ONLY）

针对 IE 6 以及更低版本（Target IE 6 and LOWER）

针对 IE 7 以及更低版本（Target IE 7 and LOWER）

针对 IE 8 以及更低版本（Target IE 8 and LOWER）

针对 IE 6 以及更高版本（Target IE 6 and HIGHER）

针对 IE 7 以及更高版本（Target IE 7 and HIGHER）

针对 IE 8 以及更高版本（Target IE 8 and HIGHER）

3. 针对 IE 10（Target IE 10）

参见这里

条件注释在 IE 10 中消失了。这是好事儿。IE 10 是一个非常好的浏览器。功能检测（feature detection）是几乎所有方案中最好的一种方案。但如果你发现有一些样式需要针对 IE 10，该怎么办呢？我想你将不得不面对这种情况。

通过一小段 JavaScript 代码就可以把客户端（User Agent）添加到 元素：

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10 的客户端字符串（User Agent string） 为:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

这将导致：

然后你就可以像下面这样书写样式：

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

4. 反对条件样式表的观点

我们不应该需要它们。它们违背了 web 标准的精神。

5. 支持条件样式表的观点

虽然它们违背了 web 标准的精神，但我们确实需要它们。

6. 其他资源

• IE bugs that'll get you every time
• Documentation of IE bugs

---

7. 实际应用

打算抛弃 IE 8，但希望 IE 8 及更低版本 的用户在浏览本站时，可以得到一个体验更好的不兼容提示，发现这个网站（http://www.uhouzz.com/）使用了条件注释的方法，所以学习了。

Paste_Image.png