瀏覽器兼容之旅第一站:如何在頁面中創建IE條件注釋
【瀏覽器兼容之旅第一站:如何在頁面中創建IE條件注釋】IE對于大家來說一定很熟悉了 ， 作為一名Web前端開發人員或者是說前端攻程師來說，瀏覽器的兼容問題一定處理過不少了，特別是IE6的兼容問題 ， 如果你的用戶是針對中國市場來說，IE6下的效果是必須得處理了，一個讓人頭痛而又不得不去面對的一件事情，特別是對于剛接觸CSS的童子們，更讓無從下手，那么今天我重新開始針對瀏覽器的兼容問題，說說一些我自己的經驗，以及盡可能多的搜集相關經典問題的處理方法 。希望能對有需要的朋友有所幫助 。
中國古語萬物都是相生相克的 。這句話用到我們寫CSS的人身上也是一樣的 ， 不管在哪個瀏覽器下，出現了問題，首先要追究的問題是我們自己怕HTML結構和CSS樣式有沒有出問題，然后在看看是不是因為瀏覽器各自的解析不同而造成的 。千萬不要一看到IE出問題，就罵上了ＩＥ，其實人家并不是那么差勁，另外有一點也需要注意的就是，不要動不動就使用你知道的HACK手段來解決各瀏覽器的兼容問題 。小生有自己的一個原則處理各瀏覽器的兼容問題，未到情非得以的情況下才使用HACK 。
開頭來了一大段的開場白，下面我們就開始我們的旅行瀏覽器兼容之旅的第一站：如何創建條件樣式 。
大家都知道!-- -- 是HTML語言中的注釋 。它是一種添加到代碼中的筆記，讓自己或你的團隊成員明白你寫的是什么 ， 寫到什么時候等等信息，這種注釋并不會在瀏覽器中顯示出來，但大家在查看頁面的源代碼時可以看到這一部分，如下面的一個簡單實例
復制代碼代碼如下:
div id="header" Header Section /div
!-- End Header Section Content --
那么我們在上面的基礎是增加一個條件語句，我們就可以使用條件注釋，我們在平時用到的就是IE的有條件注釋 。IE的有條件注釋是一種專有的（非標準的）、對常規(X)HTML注釋的Miscrosoft擴展 。換句話說，有條件注釋使你能夠根據條件（比如說瀏覽器的版本）顯示代碼塊 。盡管是非標準的，但是有條件注釋對于其他所有瀏覽器作為常規注釋出現,因此本質上是無害的 。有條件注釋在 Windows 上的 IE5 中首次出現,并且得到了 Widnows 瀏覽器所有后續版本的支持 。
那么為什么要創建條件樣式呢？言外之意我們創建條件樣式有什么好處呢？創建條件樣式優點在于：可以將部分兼容代碼識讓符合條件的瀏覽器識別；其二讓你的主要樣式表整潔，清爽 。不過大家要記住，雖然我們這里說的是創建有條件樣式 ， 但這種條件注釋標簽的使用不僅僅只能用于CSS，你可以應用在javaScript中，他們甚至可以在您的網站內容顯示特殊的IE瀏覽器特定的消息 。下面我們一起來看看其具體的應用 ， 和使用方法 。
調用條件樣式的方法
我們調用條件樣式方法和link標簽一樣，常常放置在head標簽中 。和前面所見識的普通注釋不一樣的是，這里需要加上條件判斷，具體格式如下所示：
復制代碼代碼如下:
!--[if IE]
...
![endif]--
在具體使用條件注釋語句之前，有幾種條件注釋屬性含義我們必須要理解：
gt(greate than): 選擇條件版本以上版本，不包含條件版本本身；
lt(less than): 這個剛好與gt相反，表示的是選擇條件版本以下的版本，不包含條件版本自身；
gte(greate than or equal): 選擇條件版本以上版本，并包含條件版本自身；
lte(less than or equal): 選擇條件版本以下的版本，并包含條件版本自身；
!:選擇條件版本以外所有版本，無論高低 。
條件樣式的使用方法
下面我們一起來看針對不同版本如何使用條件樣式
1、支持所有IE瀏覽器
復制代碼代碼如下:
!--[if IE]
link rel="stylesheet" type="text/css"/
![endif]--
2、支持除IE外的所有瀏覽器
復制代碼代碼如下:
!--[if !IE]
link rel="stylesheet" type="text/css"/
![endif]--
上面是除了IE瀏覽器外所有瀏覽器都識別這個樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet 》一文中提供了另一種寫法：
復制代碼代碼如下:
!--[if !IE] !--
link rel="stylesheet" type="text/css" /
!--![endif]--
3、僅僅支持IE10
復制代碼代碼如下:
!--[if IE 10]
link rel="stylesheet" type="text/css"
![endif]--
4、僅僅支持IE9
復制代碼代碼如下:
!--[if IE 9]
link rel="stylesheet" type="text/css"
![endif]--
5、僅僅支持IE8
復制代碼代碼如下:
!--[if IE 8]
link rel="stylesheet" type="text/css"
![endif]--
6、僅僅支持IE7
復制代碼代碼如下:
!--[if IE 7]
link rel="stylesheet" type="text/css"
![endif]--
7、僅僅支持IE6
復制代碼代碼如下:
!--[if IE 6]
link rel="stylesheet" type="text/css"
![endif]--
8、支持IE10以下版本（IE9以及IE9以下版本）
這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持 。
復制代碼代碼如下:
!--[if lt IE 10]
link rel="stylesheet" type="text/css"
![endif]--
也可以寫成
復制代碼代碼如下:
!--[if lte IE 9]
link rel="stylesheet" type="text/css"
![endif]--
前面我們也說過了lt和lte的區別,lt表示小于版本號，不包括條件版本號本身；而lte是小于或等于版本號，包括了版本號自身 。
9、支持IE9以下版本（IE8以及IE8以下版本）
復制代碼代碼如下:
!--[if lt IE 9]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if lte IE 8]
link rel="stylesheet" type="text/css"
![endif]--
10、支持IE8以下版本（IE7以及IE7以下版本）
復制代碼代碼如下:
!--[if lt IE 8]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if lte IE 7]
link rel="stylesheet" type="text/css"
![endif]--
11、支持IE7以下版本（IE6以及IE6以下版本）
復制代碼代碼如下:
!--[if lt IE 7]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if lte IE 6]
link rel="stylesheet" type="text/css"
![endif]--
上面811這幾種方法 ， 使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于（gt）和大于或等于（gte）達到上面的效果：
12、高于IE9的版本(IE10以及IE10以上版本)
復制代碼代碼如下:
!--[if gt IE 9]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if gte IE 10]
link rel="stylesheet" type="text/css"
![endif]--
13、高于IE8的版本(IE9以及IE9以上版本)
復制代碼代碼如下:
!--[if gt IE 8]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if gte IE 9]
link rel="stylesheet" type="text/css"
![endif]--
14、高于IE7的版本(IE8以及IE8以上版本)
復制代碼代碼如下:
!--[if gt IE 7]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if gte IE 8]
link rel="stylesheet" type="text/css"
![endif]--
15、高于IE6的版本(IE7以及IE7以上版本)
復制代碼代碼如下:
!--[if gt IE 6]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if gte IE 7]
link rel="stylesheet" type="text/css"
![endif]--
16、高于IE5.5的版本(IE6以及IE6以上版本)
復制代碼代碼如下:
!--[if gt IE 5.5]
link rel="stylesheet" type="text/css"
![endif]--
或：
復制代碼代碼如下:
!--[if gte IE 6]
link rel="stylesheet" type="text/css"
![endif]--
12-16幾種方式剛好和8-11幾方式相反，我們此處使用的是gt和gte，gt剛好和lt相反 ， 表示的是大于條件版本號 ， 不包括版本號本身；而gte則和lte相反，表示的是大于或等于條件版本號，包括了條件版本自身 。一共羅列了16種條件注釋所表達的含義，大家要呵以根據平時的應用對比參照一下，如果從未接觸的朋友，可以動手嘗試一下 ， 動手能豐衣足食嘛 。
上面就是展示了如何創建條件注釋樣式，大家可以根據自己的需求使用其中的一種或是多種，最后總結一下條件注釋主要針對的是IE瀏覽器，所以我們也把他稱作IE條件注釋 。另外IE條件注釋只有IE5以上的版本才開始支持IE條件注釋，所以只有ＩＥ才能識別，換句話說，只有IE5版本以上才能識別IE條件注釋 。如此一來，我們管理給IE兼容寫的單獨樣式 ， 就帶來了極大的方便與好處 。最后有一點需要提出的是：IE的條件注釋不單單針對樣式，我們也可以針對于javascrit或者其字的注釋說明 。最后我們在來看一個IE條件注釋應用在javaScript的實例：
復制代碼代碼如下:
!--[if IE 6]
script type="text/javascript" src="https://www.questions.com.cn/dnjc/js/pngfix.js" /script
script type="text/javascript" src="https://www.questions.com.cn/dnjc/js/ie6.js" /script
![endif]--
這一節主要了解了如何在頁面中創建IE條件注釋,以及其帶來的好處 ， 和所起的作用 。那么下一節將進入瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達到一致的渲染效果 。感興趣的朋友請觀注本站的相關更新 。
