Internet Explorer条件注释

Conditional comments comprise a proprietary Microsoft extension to Internet Explorer that provides a mechanism to target each of the versions of IE either specifically, or as a group. This extension was introduced in IE5, but removed in IE10, so it can only be used in documents rendered in browsers from IE5 to IE9 inclusive up on the Windows platform.

条件注释包括Internet Explorer的专有Microsoft扩展，它提供了一种机制来专门针对或作为一组针对IE的每个版本。 此扩展是IE5中引入的，但在IE10中已删除，因此只能在Windows平台(包括IE5至IE9)的浏览器中呈现的文档中使用。

Conditional comments use a special syntax—HTML markup wrapped in a conditional statement—and are placed within an HTML comment. If the statement evaluates to true, the enclosed HTML is revealed within the HTML document. If the statement evaluates to false, the enclosed HTML remains hidden. Because conditional comments are placed with HTML comments, the enclosed HTML also remains hidden from all browsers that don’t support conditional comments.

条件注释使用一种特殊的语法(包装在条件语句中HTML标记)，并置于HTML注释内。 如果该语句的评估结果为true ，则将在HTML文档中显示随附HTML。 如果该语句的计算结果为false，则随附HTML将保持隐藏状态。 由于条件注释与HTML注释一起放置，因此所包含HTML对所有不支持条件注释的浏览器也保持隐藏状态。

Conditional comments can be placed at any point in the document at which normal comments can be located. As such, you can’t place them in external CSS files, or in between

可以将条件注释放置在文档中可以放置普通注释的任何位置。 因此，您不能将它们放置在外部CSS文件中或两者之间

tags. However, they can be used to link to specific files, or to provide specific HTML (or CSS) content for the IE versions specified within the conditional statement. It may seem odd to discuss HTML markup in a CSS reference, but conditional comments are Microsoft’s recommended mechanism for delivering targeted CSS to its browser.

标签。 但是，它们可用于链接到特定文件，或为条件语句中指定的IE版本提供特定HTML(或CSS)内容。 在CSS参考中讨论HTML标记似乎有些奇怪，但是条件注释是Microsoft推荐的向其浏览器提供目标CSS的机制 。

条件注释基础 (Conditional Comment Basics)

The basic form of conditional comments is as follows:

条件注释的基本形式如下：

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

The conditional statement is contained within square brackets, and begins with if followed by an expression. The enclosed HTML content is delimited by the opening

条件语句包含在方括号内，以if开头，后跟表达式。 随附HTML内容由开头分隔

In the example above, the enclosed HTML content—a > tag—will be revealed to all IE browsers that support conditional comments. It links to a style sheet that only IE will see. All browsers other than IE versions 5 and later will see the code above as one simple HTML comment. If we remove the brackets and text for the sake of clarity, we’re basically left with a normal comment structure as follows:

在上面的示例中，随附HTML内容- > 标签-将显示给所有支持条件注释的IE浏览器。 它链接到仅IE会看到的样式表。 IE 5和更高版本以外的所有浏览器都将上面的代码视为一个简单HTML注释。 如果为了清楚起见删除了方括号和文本，则基本上剩下一个普通的注释结构，如下所示：

<!--
  <link href="iecss.css" rel="stylesheet" type="text/css">
-->

条件注释运算符 (Conditional Comment Operators)

As we mentioned already, we can use conditional comments to apply CSS rules to specific IE browser versions with the help of comparison operators that allow each version of IE to be targeted precisely. We can write complex expressions using one or more of the operators listed in Table 1.

正如我们已经提到的，我们可以在比较运算符的帮助下使用条件注释将CSS规则应用于特定的IE浏览器版本，从而可以精确定位每个IE版本。 我们可以使用表1中列出的一个或多个运算符来编写复杂的表达式。

表1.条件注释运算符 (Table 1. Conditional Comment Operators)

Operator	Description
IE	represents Internet Explorer; if a number value is also specified, it represents a version vector
lt	less than operator
lte	less than or equal to
gt	greater than
gte	greater than or equal to
!	the NOT operator
()	subexpression operator
&	the AND operator
|	the OR operator
true	evaluates to true
false	evaluates to false

操作员	描述
IE	代表Internet Explorer； 如果数字值也是 指定，它表示版本向量
lt	少于运算符
lte	小于或等于
gt	比...更棒
gte	大于或等于
!	NOT运算符
()	子表达式运算符
&	AND运算子
|	OR运算子
true	评估为真
false	评估为假

So, for example, you’d use the following markup to target IE version 7:

因此，例如，您将使用以下标记来定位IE版本7：

<!--[if IE 7 ]>
  <p>Only IE 7 will see this</p>
<![endif]-->

Alternatively, if you wanted to target all IE browsers except IE7 and above (that is, versions prior to IE7), you could use this method:

或者，如果要定位除IE7及更高版本(即IE7之前的版本)以外的所有IE浏览器，则可以使用以下方法：

<!--[if lt IE 7 ]>
  <p>Only less than IE 7 will see this</p>
<![endif]-->

If you wanted to include IE7 in that list, you’d use lte operator, which selects all version numbers that are less than or equal to 7.

如果要在该列表中包含IE7，则可以使用lte运算符，该运算符会选择所有小于或等于7的版本号。

The gt (greater than) and gte (greater than or equal to) operators work similarly. Have a look at this example:

gt(大于)和gte(大于或等于)运算符的工作方式类似。 看一下这个例子：

<!--[if gte IE 6 ]>
 <p>Only  IE 6 and greater will see this</p>
<![endif]-->

This conditional comment will select all IE browsers with version numbers greater than or equal to 6, which will obviously include IE7 and even IE8—if it ever makes an appearance!

此条件注释将选择所有版本号大于或等于6的IE浏览器，如果它出现的话，显然将包括IE7甚至IE8！

It should be noted that when you use a single digit to represent the version of IE you want to target (for example, [if IE 7]) that directive will be applied to all versions of that browser including those with version vectors. For example, if you used the conditional comment below, you’d be including all versions of IE5 including IE5.5:

应该注意的是，当您使用一位数字表示要定位的IE版本时(例如[如果是IE 7])，该指令将应用于该浏览器的所有版本，包括那些带有版本向量的版本。 例如，如果使用下面的条件注释，则将包括IE5的所有版本的IE5：

<!--[if IE 5]>
 <p>This covers all versions of IE5 including IE5.5</p>
<![endif]-->

You can also use the “not” operator, !, to exclude one of the IE browser versions. To exclude IE6, but not IE7 or IE5 (if ever you wanted to do such a thing), you’d use this expression:

您还可以使用“ not”运算符！排除IE浏览器版本之一。 要排除IE6，但不排除IE7或IE5(如果您想做这样的事情)，可以使用以下表达式：

<!--[if !IE 6]>
  <p>IE7 or IE5 only</p>
<![endif]-->

下层隐藏的条件注释 (Downlevel-hidden Conditional Comments)

More complicated expressions can be created using one or more of the available operators. For example, the following conditional comment targets IE6 and IE7 using subexpressions and the OR operator:

可以使用一个或多个可用运算符来创建更复杂的表达式。 例如，以下条件注释使用子表达式和OR运算符将IE6和IE7定位为目标：

<!--[if (IE 6)|(IE 7)]>
  <p>IE6 or IE7 only </p>
<![endif]-->

Microsoft refers to the this style of conditional comments as downlevel-hidden, since browsers that don’t support conditional comments (including IE4 and earlier) will interpret the conditional comment code as a standard HTML comment, and ignore it completely. And yes—Microsoft describes all browsers except IE5 and later as “downlevel” browsers!

Microsoft将这种类型的条件注释称为“ 隐藏级别” ，因为不支持条件注释的浏览器(包括IE4和更早版本)会将条件注释代码解释为标准HTML注释，而将其完全忽略。 是的，Microsoft将除IE5和更高版本以外的所有浏览器都描述为“下级”浏览器！

There is, however, another version of conditional comments that will allow these downlevel browsers to be targeted; they’re called downlevel-revealed conditional comments.

但是，还有另一个版本的条件注释，它将使这些下层浏览器成为目标。 它们被称为下层公开的条件注释。

下层显示的条件注释 (Downlevel-revealed Conditional Comments)

In downlevel-revealed conditional comments, the HTML content inside the conditional statements is revealed to browsers that don’t support conditional comments, because the conditional statements—and only the conditional statements—are ignored. If the statement evaluates to true (in a supporting browser), the content inside the conditional statements is also revealed.

在下层显示的条件注释中，条件语句中HTML内容会显示给不支持条件注释的浏览器，因为条件语句(仅条件语句)会被忽略。 如果该语句评估为true(在支持的浏览器中)，则条件语句中的内容也会显示出来。

Unfortunately, the syntax of these downlevel-revealed conditional comments will often cause HTML validation errors. Here’s Microsoft’s suggested syntax:

不幸的是，这些下层显示的条件注释的语法通常会导致HTML验证错误。 这是Microsoft建议的语法：

<![if !IE]>
 <p>This is shown in downlevel browsers, but is invalid HTML!</p>
<![endif]>

However, a better, valid version of the syntax is available. It’s been discovered that if you change the syntax slightly, the downlevel effect can be maintained and the HTML code will validate:

但是， 可以使用语法的更好， 有效的版本 。 已经发现，如果您稍微更改语法，则可以保持下层效果，并且HTML代码将验证：

<!--[if !IE]>-->
  <p>This is shown in downlevel browsers.</p>
<!--<![endif]-->

Here, we simply wrap the conditional statements in HTML comments. It should be noted that this usage doesn’t conform to Microsoft’s specifications for these comments, but it presently works in all versions of IE5 and later (including IE7) and, more to the point, will also validate—unlike Microsoft’s version.

在这里，我们仅将条件语句包装在HTML注释中。 应该注意的是，这种用法不符合Microsoft的这些注释规范，但目前可在IE5及更高版本(包括IE7)的所有版本中使用，并且更重要的是，还将与Microsoft的版本兼容。

That said, a problem exists with that approach should you wish to target downlevel browsers as well as a supporting Microsoft browser version. Take a look at this example, which attempts to target downlevel browsers and IE7 or later:

就是说，如果您希望针对低级浏览器以及支持的Microsoft浏览器版本，则该方法存在问题。 看一下此示例，该示例尝试定位到低级浏览器和IE7或更高版本：

<!--[if gte IE 7]>-->
  <p>This is shown in downlevel browsers and IE7 or later.</p>
<!--<![endif]-->

This example uses valid HTML, but IE7 and later browsers will also reveal the –> after the opening conditional statement. The fix suggested by Microsoft is to add an extra < ! just after the opening conditional comment:

本示例使用有效HTML，但是IE7和更高版本的浏览器还将在打开条件语句后显示–>。 Microsoft建议的解决方法是添加额外的<！ 在开始条件注释之后：

<!--[if gte IE 7]><!-->
  <p>This is shown in downlevel browsers and IE7 or later.</p>
<!--<![endif]-->

实践中的条件注释 (Conditional Comments in Practice)

If you want to use conditional comments in your approach to delivering targeted CSS, here’s what you can do. First, link to your standard style sheet in the normal way (via a > tag, for example). Then, use conditional comments to link to one or more other style sheets that contain the CSS targeted towards IE. The IE-only style sheets should contain only the required CSS fixes. They shouldn’t be a duplication of your standard style sheet—that would be a waste of bandwidth and completely redundant anyway. Here’s an example of this approach:

如果要在提供目标CSS的方法中使用条件注释，则可以执行以下操作。 首先，以常规方式(通过 > 标签)。 然后，使用条件注释链接到包含针对IECSS的一个或多个其他样式表。 仅限IE的样式表应仅包含必需CSS修复程序。 它们不应该是您的标准样式表的副本，那将是带宽的浪费，并且完全是多余的。 这是此方法的示例：

<link href="main.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 5]>
<link href="ie5.css" rel="stylesheet" type="text/css">
<![endif]-->

main.css is the standard style sheet, while ie7.css, ie6.css, and ie5.css contain the CSS for specific IE versions. You may not need to be as version-specific as we’ve been in this example. Remember that the cascade will be in effect, and that the rules in the CSS files that are referenced lower down the page source will overrule any previously defined CSS rules.

main.css是标准样式表，而ie7.css，ie6.css和ie5.css包含特定IE版本CSS。 您可能不需要像本例中那样一直是特定于版本的。 请记住，级联将生效，并且页面源下端引用CSS文件中的规则将推翻所有先前定义CSS规则。

Whether you like conditional comments or not, they do make it easy and safe to target versions of IE, and they’re as future-proof as any of these tricks can be. The comments also provide a logical structure to your CSS management approach, and separate the targeted CSS from the standard CSS. At some time in the future when the targeted CSS is no longer required, the code, which is already separated, can easily be removed.

不管您是否喜欢条件注释，它们都确实使针对IE版本的安全性变得容易且安全，并且它们具有与上述任何技巧一样的面向未来的能力。 这些注释还为您CSS管理方法提供了逻辑结构，并将目标CSS与标准CSS分开。 在将来的某个时候，不再需要目标CSS时，可以轻松删除已经分开的代码。

翻译自: https://www.sitepoint.com/internet-explorer-conditional-comments/