瀏覽器兼容之旅第一站:如何在頁面中創(chuàng)建IE條件注釋
發(fā)布時(shí)間：2012-12-27 12:46:34 作者：佚名 
我要評論
我要評論瀏覽器的兼容問題一定處理過不少了，特別是IE6的兼容問題;這一節(jié)主要了解了如何在頁面中創(chuàng)建IE條件注釋,以及其帶來的好處，和所起的作用,需要了解的朋友可以參考下
IE對于大家來說一定很熟悉了，作為一名Web前端開發(fā)人員或者是說前端攻程師來說，瀏覽器的兼容問題一定處理過不少了，特別是IE6的兼容問題，如果你的用戶是針對中國市場來說，IE6下的效果是必須得處理了，一個(gè)讓人頭痛而又不得不去面對的一件事情，特別是對于剛接觸CSS的童子們，更讓無從下手，那么今天我重新開始針對瀏覽器的兼容問題，說說一些我自己的經(jīng)驗(yàn)，以及盡可能多的搜集相關(guān)經(jīng)典問題的處理方法。希望能對有需要的朋友有所幫助。
中國古語——萬物都是相生相克的。這句話用到我們寫CSS的人身上也是一樣的，不管在哪個(gè)瀏覽器下，出現(xiàn)了問題，首先要追究的問題是我們自己怕HTML結(jié)構(gòu)和CSS樣式有沒有出問題，然后在看看是不是因?yàn)闉g覽器各自的解析不同而造成的。千萬不要一看到IE出問題，就罵上了ＩＥ，其實(shí)人家并不是那么差勁，另外有一點(diǎn)也需要注意的就是，不要?jiǎng)硬粍?dòng)就使用你知道的HACK手段來解決各瀏覽器的兼容問題。小生有自己的一個(gè)原則——“處理各瀏覽器的兼容問題，未到情非得以的情況下才使用HACK”。
開頭來了一大段的開場白，下面我們就開始我們的旅行——瀏覽器兼容之旅的第一站：如何創(chuàng)建條件樣式。
大家都知道<!-- -- >是HTML語言中的注釋。它是一種添加到代碼中的筆記，讓自己或你的團(tuán)隊(duì)成員明白你寫的是什么，寫到什么時(shí)候等等信息，這種注釋并不會(huì)在瀏覽器中顯示出來，但大家在查看頁面的源代碼時(shí)可以看到這一部分，如下面的一個(gè)簡單實(shí)例
復(fù)制代碼
代碼如下:<div id="header" >Header Section </div>
<!-- End Header Section Content -- >
那么我們在上面的基礎(chǔ)是增加一個(gè)條件語句，我們就可以使用條件注釋，我們在平時(shí)用到的就是IE的有條件注釋。IE的有條件注釋是一種專有的（非標(biāo)準(zhǔn)的）、對常規(guī)(X)HTML注釋的Miscrosoft擴(kuò)展。換句話說，有條件注釋使你能夠根據(jù)條件（比如說瀏覽器的版本）顯示代碼塊。盡管是非標(biāo)準(zhǔn)的，但是有條件注釋對于其他所有瀏覽器作為常規(guī)注釋出現(xiàn),因此本質(zhì)上是無害的。有條件注釋在 Windows 上的 IE5 中首次出現(xiàn),并且得到了 Widnows 瀏覽器所有后續(xù)版本的支持。
那么為什么要?jiǎng)?chuàng)建條件樣式呢？言外之意我們創(chuàng)建條件樣式有什么好處呢？創(chuàng)建條件樣式優(yōu)點(diǎn)在于：可以將部分兼容代碼識(shí)讓符合條件的瀏覽器識(shí)別；其二讓你的主要樣式表整潔，清爽。不過大家要記住，雖然我們這里說的是創(chuàng)建有條件樣式，但這種條件注釋標(biāo)簽的使用不僅僅只能用于CSS，你可以應(yīng)用在javaScript中，他們甚至可以在您的網(wǎng)站內(nèi)容顯示特殊的IE瀏覽器特定的消息。下面我們一起來看看其具體的應(yīng)用，和使用方法。
調(diào)用條件樣式的方法
我們調(diào)用條件樣式方法和<link>標(biāo)簽一樣，常常放置在<head>標(biāo)簽中。和前面所見識(shí)的普通注釋不一樣的是，這里需要加上條件判斷，具體格式如下所示：
復(fù)制代碼
代碼如下:<!--[if IE] >
...
<![endif]-->
在具體使用條件注釋語句之前，有幾種條件注釋屬性含義我們必須要理解：
gt(greate than): 選擇條件版本以上版本，不包含條件版本本身；
lt(less than): 這個(gè)剛好與gt相反，表示的是選擇條件版本以下的版本，不包含條件版本自身；
gte(greate than or equal): 選擇條件版本以上版本，并包含條件版本自身；
lte(less than or equal): 選擇條件版本以下的版本，并包含條件版本自身；
!:選擇條件版本以外所有版本，無論高低。
條件樣式的使用方法
下面我們一起來看針對不同版本如何使用條件樣式
1、支持所有IE瀏覽器
復(fù)制代碼
代碼如下:<!--[if IE] >
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/ >
<![endif]-->
2、支持除IE外的所有瀏覽器
復(fù)制代碼
代碼如下:<!--[if !IE] >
<link rel="stylesheet" href="not-ie.css" type="text/css"/ >
<![endif]-->
上面是除了IE瀏覽器外所有瀏覽器都識(shí)別這個(gè)樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet 》一文中提供了另一種寫法：
復(fù)制代碼
代碼如下:<!--[if !IE] ><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" / >
<!--<![endif]-->
3、僅僅支持IE10
復(fù)制代碼
代碼如下:<!--[if IE 10] >
<link rel="stylesheet" type="text/css" href="ie10.css" >
<![endif]-->
4、僅僅支持IE9
復(fù)制代碼
代碼如下:<!--[if IE 9] >
<link rel="stylesheet" type="text/css" href="ie9.css" >
<![endif]-->
5、僅僅支持IE8
復(fù)制代碼
代碼如下:<!--[if IE 8] >
<link rel="stylesheet" type="text/css" href="ie8.css" >
<![endif]-->
6、僅僅支持IE7
復(fù)制代碼
代碼如下:<!--[if IE 7] >
<link rel="stylesheet" type="text/css" href="ie7.css" >
<![endif]-->
7、僅僅支持IE6
復(fù)制代碼
代碼如下:<!--[if IE 6] >
<link rel="stylesheet" type="text/css" href="ie6.css" >
<![endif]-->
8、支持IE10以下版本（IE9以及IE9以下版本）
這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。
復(fù)制代碼
代碼如下:<!--[if lt IE 10] >
<link rel="stylesheet" type="text/css" href="ie9-and-down.css" >
<![endif]-->
也可以寫成
復(fù)制代碼
代碼如下:<!--[if lte IE 9] >
<link rel="stylesheet" type="text/css" href="ie9-and-down.css" >
<![endif]-->
前面我們也說過了lt和lte的區(qū)別,lt表示小于版本號(hào)，不包括條件版本號(hào)本身；而lte是小于或等于版本號(hào)，包括了版本號(hào)自身。
9、支持IE9以下版本（IE8以及IE8以下版本）
復(fù)制代碼
代碼如下:<!--[if lt IE 9] >
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if lte IE 8] >
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" >
<![endif]-->
10、支持IE8以下版本（IE7以及IE7以下版本）
復(fù)制代碼
代碼如下:<!--[if lt IE 8] >
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if lte IE 7] >
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" >
<![endif]-->
11、支持IE7以下版本（IE6以及IE6以下版本）
復(fù)制代碼
代碼如下:<!--[if lt IE 7] >
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if lte IE 6] >
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" >
<![endif]-->
上面8——11這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于（gt）和大于或等于（gte）達(dá)到上面的效果：
12、高于IE9的版本(IE10以及IE10以上版本)
復(fù)制代碼
代碼如下:<!--[if gt IE 9] >
<link rel="stylesheet" type="text/css" href="ie10-and-up.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if gte IE 10] >
<link rel="stylesheet" type="text/css" href="ie10-and-up.css" >
<![endif]-->
13、高于IE8的版本(IE9以及IE9以上版本)
復(fù)制代碼
代碼如下:<!--[if gt IE 8] >
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if gte IE 9] >
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" >
<![endif]-->
14、高于IE7的版本(IE8以及IE8以上版本)
復(fù)制代碼
代碼如下:<!--[if gt IE 7] >
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if gte IE 8] >
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" >
<![endif]-->
15、高于IE6的版本(IE7以及IE7以上版本)
復(fù)制代碼
代碼如下:<!--[if gt IE 6] >
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if gte IE 7] >
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" >
<![endif]-->
16、高于IE5.5的版本(IE6以及IE6以上版本)
復(fù)制代碼
代碼如下:<!--[if gt IE 5.5] >
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" >
<![endif]-->
或：
復(fù)制代碼
代碼如下:<!--[if gte IE 6] >
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" >
<![endif]-->
12-16幾種方式剛好和8-11幾方式相反，我們此處使用的是“gt”和“gte”，“gt”剛好和“lt”相反，表示的是大于條件版本號(hào)，不包括版本號(hào)本身；而“gte”則和"lte"相反，表示的是大于或等于條件版本號(hào)，包括了條件版本自身。一共羅列了16種條件注釋所表達(dá)的含義，大家要呵以根據(jù)平時(shí)的應(yīng)用對比參照一下，如果從未接觸的朋友，可以動(dòng)手嘗試一下，動(dòng)手能豐衣足食嘛。
上面就是展示了如何創(chuàng)建條件注釋樣式，大家可以根據(jù)自己的需求使用其中的一種或是多種，最后總結(jié)一下條件注釋主要針對的是IE瀏覽器，所以我們也把他稱作IE條件注釋。另外IE條件注釋只有IE5以上的版本才開始支持IE條件注釋，所以“只有ＩＥ”才能識(shí)別，換句話說，只有IE5版本以上才能識(shí)別IE條件注釋。如此一來，我們管理給IE兼容寫的單獨(dú)樣式，就帶來了極大的方便與好處。最后有一點(diǎn)需要提出的是：“IE的條件注釋不單單針對樣式，我們也可以針對于javascrit或者其字的注釋說明”。最后我們在來看一個(gè)IE條件注釋應(yīng)用在javaScript的實(shí)例：
復(fù)制代碼
代碼如下:<!--[if IE 6] >
<script type="text/javascript" src="js/pngfix.js" ></script>
<script type="text/javascript" src="js/ie6.js" ></script>
<![endif]-->
這一節(jié)主要了解了如何在頁面中創(chuàng)建IE條件注釋,以及其帶來的好處，和所起的作用。那么下一節(jié)將進(jìn)入瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達(dá)到一致的渲染效果。感興趣的朋友請觀注本站的相關(guān)更新。
相關(guān)文章
- 條件注釋是IE特有的一種功能，能對IE系列產(chǎn)品進(jìn)行單獨(dú)的XHTML代碼處理，注意，主要是針對XHTML,而非CSS。 條件注釋功能非常強(qiáng)大，可以進(jìn)行true和false判斷，例如：2008-10-17
IE的有條件注釋優(yōu)點(diǎn)和缺點(diǎn)
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。 IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTM2009-04-02- IE瀏覽器的條件注釋雖不太常用，卻異常強(qiáng)大，不僅可以用來區(qū)分IE瀏覽器版本2010-03-05
- 本文將為你總結(jié)CSS針對各瀏覽器的兼容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.2010-07-04
- ie10已經(jīng)上線一段時(shí)間了，相信已經(jīng)有一部分前端潮人體驗(yàn)過了,截至到現(xiàn)在，在ie6到ie9的瀏覽器各種各樣的古怪行為，開發(fā)人員不得不使用條件注釋，有條件的類，和其他特定于I2012-12-11
- 使用條件注釋判斷瀏覽器在某些時(shí)候還是比較使用的，比如css 樣式的兼容根據(jù)瀏覽器不同進(jìn)行判斷加載，類似的例子還有好多，感興趣的朋友可以參考下，希望對大家有所幫助2013-07-26
使用條件注釋判斷 IE 瀏覽器版本適用于IE5.0及以上版本
IE條件注釋是一種特殊的HTML注釋，這種注釋只有IE5.0及以上版本才能理解，下面為大家介紹下使用條件注釋判斷 IE 瀏覽器版本，感興趣的朋友可以參考下2014-03-31- 條件注釋是IE特有的一種功能，能對IE系列產(chǎn)品進(jìn)行單獨(dú)的XHTML代碼處理，注意，主要是針對XHTML,而非CSS。本文我們就來探討下關(guān)于IE條件注釋的相關(guān)問題。2014-12-08