!IE 的条件注释会中断旧版本的 Firefox

Question

我处于一种情况，我需要根据访问页面的浏览器加载两个样式表之一：
如果除了 IE 之外，然后加载 "new" 样式表
如果 IE >= 9 然后加载 "new" 样式表
如果 IE < 9 则加载旧样式表

这是用于实现的代码：

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

这适用于所有现代浏览器，旧版本的 IE 可以正确加载旧样式。然而，在旧版本的 Firefox (3.6) 和可能的其他版本中，新的 css 不会被加载，而是 --> 被打印到网页上。这是因为必须添加 !IE - <!--> 行，否则 IE 11 不会加载样式表。如果我把它去掉，它在 Firefox 3.6 中可以正常工作。

设置这些条件注释以确保其在各种浏览器和版本上正常工作的正确方法是什么？

Answer 1

我认为问题出在  之前的定界符。 <!--[if gte IE 9]> 注释还没有结束，所以在 HTML 中不能嵌套注释，因此在那里再添加一个 <!-- 分隔符实际上是无效的。虽然当前版本的 Firefox 表现符合预期，但如果这是 Firefox 3.6 处理方式不同的原因，我也不会感到惊讶。

如果你去掉它，Firefox 3.6 会正常运行：

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

事实上，您可以通过为您的 IE9 条件语句提供 <!--> 处理，使您的代码更 DRYer，如下所示：

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

这完全消除了对 "new" 样式表的额外引用，同时仍然允许所有浏览器以及 IE9 访问它。请注意，IE 9 之后的其他版本实际上不再支持条件注释，因此您可以更进一步，将 gte IE 9 更改为 IE 9，它仍然可以在较新版本的 IE 中工作（以及其他浏览器） ).当然，为了清楚起见，欢迎您保持这种方式。

附带说明一下，虽然我说过在注释中使用  被解释为 <! 后跟结束分隔符 --> 而不是 <!-- 后跟 >，这就是该位没问题的原因。

!IE 的条件注释会中断旧版本的 Firefox

Conditional comment for !IE breaks for old versions of Firefox

html

css

firefox

internet-explorer

conditional-comments