条件注释与 HTML 注释 ( <!-- -->) 具有相同的语法，但它们仅适用于 Internet Explorer 浏览器 (IE)。尽管现在网络上不再使用该技术。
注释里面的内容只在IE 5-9上可用，其他浏览器会忽略。从 IE 10 开始，语法被禁用。
<!--[if IE]>Only IE sees this<![endif]-->还可以添加一些约束来限制 IE 版本，例如：
<!--[if IE 8]>Only IE 8 sees this<![endif]-->
<!--[if gte IE 8]>Only IE 8 and higher versions see this<![endif]-->
<!--[if lte IE 8]>Only IE 8 and lower versions see this<![endif]-->表示IE版本的特殊字符如下：
| 特点 | 描述 |
|---|---|
gt | 大于 |
gte | 大于或等于 |
lt | 少于 |
lte | 小于或等于 |
可以为给定的 IE 版本应用样式或修复，例如：
<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]>
<link href="fix-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
<link href="fix-ie9.css" rel="stylesheet" />
<![endif]-->styles.css文件包含适用于现代浏览器的样式，而fix-ie8.css和fix-ie9.css文件分别提供适用于 IE 8 和 IE 9 的修复程序。
但如此，就会多一个 HTTP 请求。但是，可以通过对根元素使用条件注释来减少请求的数量html：
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->html根据访问者当前使用的 IE 版本，根元素将有一个额外的 CSS 类。例如，IE 9 浏览器将添加ie9CSS 类。这些样式现在合并为一个CSS文件：
<link href="all-styles.css" rel="stylesheet" />它包含针对不同 IE 版本的修复：
.card {
background: rgba(0, 0, 0, 0.5);
}
/* Background with opacity is only available on IE 9 and later */
.ie6 .card,
.ie7 .card,
.ie8 .card {
background: #ccc;
}HTTP 请求数问题已解决。但是，样式现在包含许多重复代码。我们可以通过向html元素添加更多 CSS 类来解决此问题：
<!--[if lt IE 7]><html class="lt-ie7 lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 7]><html class="lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->如此，IE 6、7、8 中 card 的附加样式现在可以合并到一个类声明中：
.lt-ie9 .card {
/* Styles for IEs before 9 */
}除了 Internet Explorer (IE)，其他浏览器会忽略条件注释。IE 10 也禁用了该标签。如何为其他浏览器和旧版本的 IE 添加额外的类？
可以根据用户代理检测浏览器及其版本。以下代码片段检查当前浏览器是否为 IE 11，并在需要时添加相应的 CSS 类：
function detectIE11() {
if (navigator.userAgent.match(/Trident.*rv:11\./)) {
document.documentElement.classList.add('ie11');
}
}一旦ie11将类添加到根html元素，就可以为 IE 11 显式添加更多样式：
.ie11 .otherClass {
/* Styles for IE 11 */
}该方法不仅适用于 IE 11，还可以用于支持其他浏览器。
扫一扫
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
