原文（译者在原文基础上添加了部分内容）：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 文件一样 放在 <head> 标签中。你应该很熟悉它的开始标签和结束标签，它们只是常规的 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）
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
针对除了 IE 之外的所有浏览器（Target everything EXCEPT IE）
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
只针对 IE 7（Target IE 7 ONLY）
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
只针对 IE 6（Target IE 6 ONLY）
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
只针对 IE 5（Target IE 5 ONLY）
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
只针对 IE 5.5（Target IE 5.5 ONLY）
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
针对 IE 6 以及更低版本（Target IE 6 and LOWER）
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
针对 IE 7 以及更低版本（Target IE 7 and LOWER）
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
针对 IE 8 以及更低版本（Target IE 8 and LOWER）
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
针对 IE 6 以及更高版本（Target IE 6 and HIGHER）
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
针对 IE 7 以及更高版本（Target IE 7 and HIGHER）
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
针对 IE 8 以及更高版本（Target IE 8 and HIGHER）
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
3. 针对 IE 10（Target IE 10）
条件注释在 IE 10 中消失了。这是好事儿。IE 10 是一个非常好的浏览器。功能检测（feature detection）是几乎所有方案中最好的一种方案。但如果你发现有一些样式需要针对 IE 10，该怎么办呢？我想你将不得不面对这种情况。
通过一小段 JavaScript 代码就可以把客户端（User Agent）添加到 <html> 元素：
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="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. 其他资源
7. 实际应用
打算抛弃 IE 8，但希望 IE 8 及更低版本 的用户在浏览本站时，可以得到一个体验更好的不兼容提示，发现这个网站（http://www.uhouzz.com/）使用了条件注释的方法，所以学习了。
Paste_Image.png
网友评论