IE的另類CSS hack，條件注釋

常看見國外的一些css的下拉式功能表的源碼，因為IE7.0以下版本大多數標籤不支援:hover的樣式，所以比較多的使用條件注釋。什麼是瀏覽器的條件注釋呢？

插入代碼：<!--[if IE]>
<h1>您正在使用IE瀏覽器</h1>
<![endif]-->

上面的代碼就是條件注釋，條件注釋是在IE5.0/Win以後才被IE支援的，一般用於hack，如果你用的是IE瀏覽器，你就可以在頁面裡看到“您正在使用IE瀏覽器”，如果是IE以外的瀏覽器，就看不到這句話。為什麼呢？

1. 條件注釋的基本結構和HTML的注釋(< !-- -- >)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。
2. IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋裡的內容。
3. 條件注釋使用的是HTML的注釋結構，因此他們只能使用在HTML檔案裡，而不能在CSS檔案中使用。

下面一段代碼是測試在IE瀏覽器下的條件備註陳述式的效果

插入代碼：<!--[if IE]>
<h1>您正在使用IE瀏覽器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->

如果你用的是IE 6，你會看到頁面上顯示“您正在使用IE瀏覽器”和“版本 6”。

同樣的方法，我們還可以通過條件注釋給頁面連結一個附加的樣式表檔案。

插入代碼：<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="style_for_ie6.css" />
<![endif]-->

這樣，如果你使用的是IE 6，你連結的樣式表有2個，分別是style.css和針對IE 6的style_for_ie6.css，而其他的瀏覽器就只連結了style.css

當然還有內部樣式

插入代碼：<!--[if IE]>
<style>
#top {margin-left: 20px;}
</style>
<![endif]-->

上面的語句也只有IE可以解釋。

所以通過條件注釋，我們可以方便的進行CSS Hack，因為條件判斷不依賴於某個瀏覽器的hack，而是一個經過深思熟慮的特色功能，所以它是可以被放心地使用的。