IE條件註釋詳解

在CSS佈局中，還常常用到IE Hack。if IE起着非常大的作用！
if IE什麼意思呢？下面就列舉了一些在CSS常見的HACK控制語句。
作爲IE的IF條件註釋使用備忘，有些時候試用if IE而不是在css中使用hack，就能通過w3c驗證。

<!--[if !IE]>除IE外都可識別<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
<!--[if IE 5]> 僅IE5.0與IE5.5可以識別 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->

條件註釋只能在windows Internet Explorer(以下簡稱IE)下使用，因此我們可以通過條件註釋來爲IE添加特別的指令。

通俗點，條件註釋就是一些if判斷，但這些判斷不是在腳本里執行的，而是直接在html代碼裏執行的，比如：

<!--[if IE]>
這裏是正常的html代碼
<![endif]-->

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

可使用如下代碼檢測當前IE瀏覽器的版本（注意：在非IE瀏覽器中是看不到效果的）

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

那如果當前的瀏覽器是IE，但版本比IE5還低，該怎麼辦呢，可以使用<!--[if ls IE 5]>，當然，根據條件註釋只能在IE5+的環境之下，所以<!--[if ls IE 5]>根本不會被執行。

lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。

lt ：就是Less than的簡寫，也就是小於的意思。

gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。

gt ：就是Greater than的簡寫，也就是大於的意思。

! ：就是不等於的意思，跟javascript裏的不等於判斷符相同

Conditional comments屬於CSS hack? 條件判斷屬於CSS hack嗎？

嚴格地說是屬於CSS hack。因爲就好象其他真正的css hack一樣，它使得我們可以給一些瀏覽器賦予特殊的樣式，再則它不依賴於某個瀏覽器的BUG來控制另外一個瀏覽器（的樣式）。除此之外，條件判斷還能用來做一些超出CSS HACK範圍的事情(雖然這種情況很少發生)。

因爲條件判斷不依賴於某個瀏覽器的hack,而是一個經過深思熟慮的特色功能，所以我相信它是可以被放心地使用的。當然，其他瀏覽器也有可能支持條件判斷（到目前爲止還沒有），但是看起來，他們應該不會使用如<!--[if IE]>這樣的語法。

應該如何應用條件註釋

本文一開始就說明了，因爲IE各版本的瀏覽器對我們製作的WEB標準的頁面解釋不一樣，具體就是對CSS的解釋不同，我們爲了兼容這些，可運用條件註釋來各自定義，最終達到兼容的目的。比如：

<!-- 默認先調用css.css樣式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>
<!-- 如果IE瀏覽器版是7,調用ie7.css樣式表 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<!-- 如果IE瀏覽器版本小於等於6,調用ie.css樣式表 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

這其中就區分了IE7和IE6向下的瀏覽器對CSS的執行，達到兼容的目的。同時，首行默認的css.css還能與其他非IE瀏覽器實現兼容。

注意：默認的CSS樣式應該位於HTML文檔的首行，進行條件註釋判斷的所有內容必須位於該默認樣式之後。

比如如下代碼，在IE瀏覽器下執行顯示爲紅色，而在非IE瀏覽器下顯示爲黑色。如果把條件註釋判斷放在首行，則不能實現。該例題很能說明網頁對IE瀏覽器和非IE瀏覽器間的兼容性問題解決。

<style type="text/css">
body{
background-color: #000;
}
</style>
<!--[if IE]>
<style type="text/css">
body{
background-color: #F00;
}
</style>
<![endif]-->

同時，有人會試圖使用<!--[if !IE]>來定義非IE瀏覽器下的狀況，但注意：條件註釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下非單不是執行該條件下的定義，而是當做註釋視而不見。

正常就是默認的樣式，對IE瀏覽器需要特殊處理的，才進行條件註釋。

IE的有條件註釋是一種專有的（因此是非標準的）、對常規（X）HTML註釋的Miscrosoft擴展。顧名思義，有條件註釋使你能夠根據條件（比如瀏覽器版本）顯示代碼塊(不一定就是css，也可以是html代碼，甚至是JavaScript代碼)。儘管是非標準的，但是有條件註釋對於其他所有瀏覽器作爲常規註釋出現，因此本質上是無害的。有條件註釋在Windows上的IE5中首次出現，並且得到了Widnows瀏覽器所有後續版本的支持。

IE的有條件註釋是一種專有的（因此是非標準的）、對常規（X）HTML註釋的Miscrosoft擴展。顧名思義，有條件註釋使你能夠根據條件（比如瀏覽器版本）顯示代碼塊。儘管是非標準的，但是有條件註釋對於其他所有瀏覽器作爲常規註釋出現，因此本質上是無害的。有條件註釋在Windows上的IE5中首次出現，並且得到了Widnows瀏覽器所有後續版本的支持。

IE的有條件註釋及其有效，而且非常容易記住。主要的缺點是這些註釋需要放在HTML頁面中，而不是放在CSS中。這樣，當你不需要這些東西，或者有所更改的時候，就需要維護很多的地方。

讓我們據幾個例子來看看吧——

只有IE才能識別

因爲只有IE5以上的版本纔開始支持IE條件註釋，所有“只有IE”才能識別的意思是“只有IE5版本以上”才能識別。

<!--[if IE]>

<style type="text/css">

    @import "test.css";

</style>

<![endif]-->