最近經常看到類似這樣的HTML代碼片段，很多前端開發人員應該都熟悉：
1 <!--[if lt IE 7]> <html class="ie6"> <![endif]-->2 <!--[if IE 7]> <html class="ie7"> <![endif]-->3 <!--[if IE 8]> <html class="ie8"> <![endif]-->4 <!--[if gt IE 8]><!--> <html> <!--<![endif]-->
這段代碼包含了一些條件注釋，它會根據瀏覽器的不同選擇性地給<html>標記添加（或不添加）一個包含瀏覽器版本信息的class屬性。具體來說，對于IE5-IE8，<html>標記會增加一個class屬性，屬性值由IE的版本來決定。對于IE9、較IE9更高的IE版本以及非IE瀏覽器，<html>保持原樣。這樣，我們就可以針對IE5-IE8這些老式瀏覽器來編寫只對它們生效的CSS代碼，比如：
1 .foo { color: red;}2 .ie6 .foo { color: yellow;}3 .ie7 .foo { color: blue;}進一步地，我們就可以避免類似這樣的CSS hack：
1 /***** 選擇器（Selector） Hacks ******/2 .foo { color: red;}3 * html .foo { color: yellow; } 4 *:first-child+html .foo { color: blue; } 5 6 /***** 屬性（Attribute） Hacks ******/7 .foo { color: red; *color: blue; _color: yellow;}使用“HTML條件注釋”來避免CSS hack，這是一種目前比較流行而且比較安全穩定的技術。這種技術的代碼有很多版本，再介紹一個比較有意思的，來自于HTML5 Boilerplate：
1 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->2 <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->3 <!--[if IE 8]> <html class="lt-ie9"> <![endif]-->4 <!--[if gt IE 8]><!--> <html> <!--<![endif]-->
文章寫到這里，我感覺，寫了這么多，全是大家可能都知道的事兒。其實，這篇文章的主題，不是討論條件注釋和CSS hack孰優孰劣，也不是討論哪種條件注釋方案最好，我想講一些條件注釋技術實現代碼的細節。
我們聚焦文章的第一段示例代碼。看這段代碼的第一行:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
就算我們沒有條件注釋的知識，憑字面我們也能大概猜出這行代碼的作用：在IE6或更低版本的瀏覽器中，這行注釋會被解析成<html class="ie6">。在其他IE瀏覽器（IE7-9）中，它會被解析成空。在非IE瀏覽器中，毫無疑問，它會被當做我們所熟知的一般HTML注釋，它會被忽略。事實上，瀏覽器的確是這樣做的。
在IE條件注釋的概念體系中，一共有兩種條件注釋類型。這種條件注釋的類型被稱作downlevel-hidden。它的語法是這樣的：
<!--[if expression]> HTML <![endif]-->
語法的細節說明可以查看文章結尾的參考資源。
在將要討論語法怪異的第四行代碼之前，讓我們先思考一個問題。憑借現有的HTML條件注釋的特性，我們能夠實現“IE9、較IE9更高的IE版本以及非IE瀏覽器中，<html>保持原樣”這一目標嗎？
1 <!--[if gt IE 8 | !IE]> <html> <![endif]-->2 ...3 </html>
這樣可以嗎？不可以。IE9瀏覽器中，注釋條件為真，代碼會解析為<html>。但是，IE10以及非IE瀏覽器中，這行代碼會被忽略，這會導致HTML文檔缺少起始<html>標記。從高亮的HTML上，我們可以明顯地看出來。特別強調一下，微軟已經宣布，IE10不再支持條件注釋。
憑借現有的HTML條件注釋的特性，我們沒有辦法實現我們的目標。怎么辦？
在IE條件注釋的概念體系中，還有另外一種條件注釋類型叫downlevel-revealed，它的語法（具體語法細節請查看文章結尾的參考資源）是這樣的:
<![if expression]> HTML <![endif]>
很幸運，我們可以利用downlevel-revealed類型的條件注釋來實現之前的目標。
<![if gt IE 8]> <html> <![endif]>
對于這行代碼瀏覽器的解析是這樣的：在IE9中，瀏覽器會識別出這是一段條件注釋，并且條件為真，所以這段代碼會解析為<html>。在IE8-IE5中，注釋的條件為假，故解析為空。在IE10以及非IE瀏覽器中，<![if gt IE 8]> 以及 <![endif]>會被當做無法識別的標簽，整條代碼最終被解析為<html>。感謝微軟，我們的目標實現了。
但是，這段代碼，是無法通過（X）HTML驗證的。為了能夠通過通過（X）HTML驗證，我們可以使用一種改進的語法，代碼可以修改為：
<!--[if gt IE 8]--> <html> <!--[endif]-->
我們增加了4個 --，這使得代碼看起來非常的怪異，這與downlevel-hidden類型有點差別，但它能被IE5-IE9識別為條件注釋別并處理。對于改進過的代碼，IE5-IE8的解析方式不變。IE10以及非IE瀏覽器會把<!--[if gt IE 8]--> <!--[endif]-->當作一般注釋來解析，最終結果不變。但是，IE9出問題了：注釋條件仍然為真，解析結果卻變成了--> <html>。我們再次改進一下語法，代碼可以修改為：
<!--[if gt IE 8]<!--> <html> <!--[endif]-->
我們只是增加了一個 <! 。 對于再次改進過的代碼，IE5-IE8的解析方式不變。IE10以及非IE瀏覽器會把<!--[if gt IE 8]<!--> <!--[endif]-->當作一般注釋來解析，最終結果不變。IE9的問題被修復了。
至此，我們所得到這行代碼，其實就是示例中的第四行代碼。
嗯，這行怪異的代碼的由來原來是這樣的。
上一篇 程序員趣聞：微軟最
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
