關於IE條件注釋（譯）

本文翻譯自此篇文章。翻譯純屬業余。

許多網站為了確保他們的站點能夠在不同的瀏覽器上有不同的顯示效果而使用特征檢測，一些傳統的網站使用其他技術，諸如在服務器或客戶端上使用腳本去檢測瀏覽器類型。在這里我們引入比使用腳本檢測瀏覽器更有優勢的方法--條件注釋。條件注釋可以輕易地更早發現早期的IE版本。條件注釋是層疊樣式表（CSS）用於區分IE特定版本的首選方式。

重要提示 自IE10起，標准模式不再支持條件注釋。而是采用特征檢測給瀏覽器不支持的功能來提供備用策略。有關標准模式的詳細信息，請參閱定義文檔兼容性。

 

下面是本文要討論的主題：

 

術語

熟悉下列術語有助於你學習文檔兼容性。　

名詞	描述
expression	由運算符、特征和（或）值組合形成一個條件語句
downlevel browser	任何瀏覽器除了IE5+，其他低版本瀏覽器不支持條件注釋
uplevel browser	IE5+支持條件注釋
downlevel-hidden	低版本瀏覽器會忽視條件注釋。如果表達式為true時，IE5+會渲染HTML頁面
downlevel-revealed	低版本瀏覽器經過條件注釋的解析。如果表達式為true時，IE5+會渲染HTML頁面

使用條件注釋的好處

下列表格中展示了基本語法類型，第一個注釋是最基本的HTML注釋。表格比較並展示每一種條件注釋的不同語法的用法。

注釋類型	語法或可能的值
HTML標准注釋	<!-- Comment content  -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

 

expression是由功能、操作符和值組成的。下表列出了支持的功能，並介紹了每個功能支持的值。

　　

Item	Example	注釋
IE	[if IE]	對應IE的版本功能來查看該網頁
value	[if IE 7]	一個整數或浮點標號對應於瀏覽器的版本。如果是與版本號匹配的瀏覽器版本，則返回true。
WindowsEdition	[if WindowsEdition]	Windows 7的IE8。  "WindowsEdition"對應Windows的版本功能。
value	[if WindowsEdition 1]	整數對應Windows版本。如果正在使用的的值相匹配，則返回true。
true	[if true]	結果始終為true.
false	[if false]	結果始終為false.

 

下表描述了可用於創建條件表達式的運算符。

Item	Example	注釋
!	[if !IE]	NOT運算符.。被放置在要素、運算符或表達式之前，扭轉表達式的布爾含義。
lt	[if lt IE 5.5]	小於運算符。如果第一個參數小於第二個參數，返回true。
lte	[if lte IE 6]	小於或等於運算符。如果第一個參數小於或等於第二個參數，返回true。
gt	[if gt IE 5]	大於運算符。如果第一個參數大於第二個參數，返回true。
gte	[if gte IE 7]	大於或等於運算符。如果第一個參數大於或等於第二個參數，返回true。
( )	[if !(IE 7)]	子表達式運算符。配合使用布爾運算符來創建更復雜的表達式。
&	[if (gt IE 5)&(lt IE 7)]	AND運算符。如果所有的子表達式的值為真，返回true。
|	[if (IE 6)|(IE 7)]	OR運算符。如果任何一個子表達式的計算結果為true，返回true。

Downlevel-hidden條件注釋

此示例顯示了一個低版本隱藏的條件注釋，其中包含文本。

<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->

Downlevel-hidden條件注釋類似於基本的HTML注釋，包含連字符（“ - ”）在開啟和關閉標簽。條件顯示在標簽的開口部，和[ENDIF]被放置在標簽的封閉部分之前。內容放在注釋標簽內。

因為前四個字符和注釋的最后三個字符是相同的HTML注釋元素，所以低版本瀏覽器會忽略注釋塊內的HTML內容。由於內容被有效地不支持條件注釋的瀏覽器隱藏，這種類型的條件注釋被稱為低版本隱藏。

如果條件表達式的結果為真，則對注釋塊里面的內容進行分析，並通過Internet Explorer 5及更高版本的渲染。針對Internet Explorer而專門設計的內容，這種做法特別有效。

下一個示例演示了如何在客戶端腳本塊放置一個條件注釋;在這種情況下，消息在IE5+瀏覽器如何顯示的。

<!--[if gte IE 7]>
<script>
  alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]--> 

在上面的例子中，瀏覽器的版本只有主要的數字進行比較，因為它是在條件表達式指定的唯一數字。要比較這兩個主要和次要版本號，要同時指定數字。

 

ownlevel-revealed條件注釋

ownlevel-revealed條件注釋允許在不承認條件注釋的瀏覽器上包含內容。盡管條件注釋被忽略，但它包含的HTML內容卻沒有被忽略。如果條件為true,IE5+仍然解析和渲染內容。ownlevel-revealed條件注釋和Downlevel-hidden條件注釋是互補的。

下面片段展示了一個典型的低版本條件注釋：

<![if lt IE 8]>
<p>Please upgrade to Internet Explorer version 8.</p>
<![endif]>

當比較這種類型HTML注釋時，發現在注釋塊在"<!"和 ">"之后（前）沒有連字符("--") ，因此，注釋分隔符被視為無法識別的HTML。因為瀏覽器不能識別Downlevel-hidden條件注釋，那么它就什么都不做了。

版本號

條件表達式可以用來確定查看網頁瀏覽器的版本或Windows上用於運行瀏覽器的版本。在這兩種情況下，表達式的值稱為版本號，必須正確地指定，以獲得所需的結果。

檢測瀏覽器的版本時，主要的瀏覽器版本被指定為整數。要檢查是否有輕微的瀏覽器版本，版本號遵循由一個小數點和四位數組成的規則。例如，微軟的Internet Explorer5.5的發布版本的版本載體是5.5000。

在下面的例子中，僅主要版本號被指定。

<!--[if IE 5]>
<p>Welcome to any incremental version of Internet Explorer 5!</p>
<![endif]-->

下面的測試正確地識別Internet Explorer 5。

<!--[if IE 5.0000]>
<p>Welcome to Internet Explorer 5.0!</p>
<![endif]-->

例子　

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->