IE 條件注釋詳解總結(jié)（附實(shí)例代碼）
更新時(shí)間：2009年08月29日 15:26:49 作者：
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對(duì)常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。
顧名思義，有條件注釋使你能夠根據(jù)條件（比如瀏覽器版本）顯示代碼塊。盡管是非標(biāo)準(zhǔn)的，但是有條件注釋對(duì)于其他所有瀏覽器作為常規(guī)注釋出現(xiàn)，因此本質(zhì)上是無(wú)害的。有條件注釋在Windows上的IE5中首次出現(xiàn)，并且得到了Widnows瀏覽器所有后續(xù)版本的支持。
IE的有條件注釋及其有效，而且非常容易記住。主要的缺點(diǎn)是這些注釋需要放在HTML頁(yè)面中，而不是放在CSS中。這樣，當(dāng)你不需要這些東西，或者有所更改的時(shí)候，就需要維護(hù)很多的地方。
讓我們據(jù)幾個(gè)例子來(lái)看看吧——
只有IE才能識(shí)別
因?yàn)橹挥蠭E5以上的版本才開(kāi)始支持IE條件注釋，所有“只有IE”才能識(shí)別的意思是“只有IE5版本以上”才能識(shí)別。
<!--[if IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有特定版本才能識(shí)別
例如，只有IE5才能識(shí)別，只有IE6才能識(shí)別，只有IE7或者IE8才能識(shí)別。識(shí)別的條件是特定的版本，高了或者低了都不可以。例如下面的代碼塊，將只會(huì)在IE8中有效
<!--[if IE 8]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有不是特定版本的才能識(shí)別
當(dāng)然，IE瀏覽器需要在5以上的版本，才在討論范圍之內(nèi)。例如下面的例子中，特定了IE7版本不能識(shí)別。
<!--[if !IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有高于特定版本才能識(shí)別
只有高于制定版本的IE瀏覽器才能識(shí)別的代碼塊。
<!--[if gt IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
有朋友會(huì)問(wèn)，為什么IE7沒(méi)有應(yīng)用到效果呢？那是因?yàn)镮E7等于IE7，而不是高于IE7。所有IE7也沒(méi)有起效果。
等于或者高于特定版本才能識(shí)別
<!--[if gte IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有低于特定版本的才能識(shí)別
<!--[if lt IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
等于或者低于特定版本的才能識(shí)別
<!--[if lte IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
關(guān)鍵詞解釋
上面那些代碼好像很難記的樣子，其實(shí)只要稍微解釋一下關(guān)鍵字就很容易記住了。
lt ：就是Less than的簡(jiǎn)寫(xiě)，也就是小于的意思。
lte ：就是Less than or equal to的簡(jiǎn)寫(xiě)，也就是小于或等于的意思。
gt ：就是Greater than的簡(jiǎn)寫(xiě)，也就是大于的意思。
gte：就是Greater than or equal to的簡(jiǎn)寫(xiě)，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判斷符相同。
這樣解釋一下，是不是好記多了。
關(guān)于IE條件注釋的特別說(shuō)明
只有IE才能識(shí)別哦——
曾經(jīng)看到過(guò)下面的代碼，現(xiàn)在想起來(lái)不禁有點(diǎn)想笑。這樣的代碼有什么意義嗎？
<!--[if !IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
不僅僅是CSS哦
很長(zhǎng)時(shí)間，我對(duì)這個(gè)都有一種誤解——以為它就是用來(lái)根據(jù)瀏覽器不同載入不同css，從而解決樣式兼容性問(wèn)題的。其實(shí)，我錯(cuò)了。它其實(shí)可以做的更多。它可以保護(hù)任何代碼塊——HTML代碼塊、JavaScript代碼塊、服務(wù)器端代碼……看看下面的代碼。
<!--[if IE]>
你使用的是IE瀏覽器，還會(huì)彈出個(gè)框哦。
<script type="text/javascript">
alert("你使用的是IE瀏覽器！");
</script>
<![endif]-->
IE的有條件注釋及其有效，而且非常容易記住。主要的缺點(diǎn)是這些注釋需要放在HTML頁(yè)面中，而不是放在CSS中。這樣，當(dāng)你不需要這些東西，或者有所更改的時(shí)候，就需要維護(hù)很多的地方。
讓我們據(jù)幾個(gè)例子來(lái)看看吧——
只有IE才能識(shí)別
因?yàn)橹挥蠭E5以上的版本才開(kāi)始支持IE條件注釋，所有“只有IE”才能識(shí)別的意思是“只有IE5版本以上”才能識(shí)別。
復(fù)制代碼 代碼如下:
<!--[if IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有特定版本才能識(shí)別
例如，只有IE5才能識(shí)別，只有IE6才能識(shí)別，只有IE7或者IE8才能識(shí)別。識(shí)別的條件是特定的版本，高了或者低了都不可以。例如下面的代碼塊，將只會(huì)在IE8中有效
復(fù)制代碼 代碼如下:
<!--[if IE 8]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有不是特定版本的才能識(shí)別
當(dāng)然，IE瀏覽器需要在5以上的版本，才在討論范圍之內(nèi)。例如下面的例子中，特定了IE7版本不能識(shí)別。
復(fù)制代碼 代碼如下:
<!--[if !IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有高于特定版本才能識(shí)別
只有高于制定版本的IE瀏覽器才能識(shí)別的代碼塊。
復(fù)制代碼 代碼如下:
<!--[if gt IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
有朋友會(huì)問(wèn)，為什么IE7沒(méi)有應(yīng)用到效果呢？那是因?yàn)镮E7等于IE7，而不是高于IE7。所有IE7也沒(méi)有起效果。
等于或者高于特定版本才能識(shí)別
復(fù)制代碼 代碼如下:
<!--[if gte IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
只有低于特定版本的才能識(shí)別
復(fù)制代碼 代碼如下:
<!--[if lt IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
等于或者低于特定版本的才能識(shí)別
復(fù)制代碼 代碼如下:
<!--[if lte IE 7]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
關(guān)鍵詞解釋
上面那些代碼好像很難記的樣子，其實(shí)只要稍微解釋一下關(guān)鍵字就很容易記住了。
lt ：就是Less than的簡(jiǎn)寫(xiě)，也就是小于的意思。
lte ：就是Less than or equal to的簡(jiǎn)寫(xiě)，也就是小于或等于的意思。
gt ：就是Greater than的簡(jiǎn)寫(xiě)，也就是大于的意思。
gte：就是Greater than or equal to的簡(jiǎn)寫(xiě)，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判斷符相同。
這樣解釋一下，是不是好記多了。
關(guān)于IE條件注釋的特別說(shuō)明
只有IE才能識(shí)別哦——
曾經(jīng)看到過(guò)下面的代碼，現(xiàn)在想起來(lái)不禁有點(diǎn)想笑。這樣的代碼有什么意義嗎？
復(fù)制代碼 代碼如下:
<!--[if !IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
不僅僅是CSS哦
很長(zhǎng)時(shí)間，我對(duì)這個(gè)都有一種誤解——以為它就是用來(lái)根據(jù)瀏覽器不同載入不同css，從而解決樣式兼容性問(wèn)題的。其實(shí)，我錯(cuò)了。它其實(shí)可以做的更多。它可以保護(hù)任何代碼塊——HTML代碼塊、JavaScript代碼塊、服務(wù)器端代碼……看看下面的代碼。
復(fù)制代碼 代碼如下:
<!--[if IE]>
你使用的是IE瀏覽器，還會(huì)彈出個(gè)框哦。
<script type="text/javascript">
alert("你使用的是IE瀏覽器！");
</script>
<![endif]-->
相關(guān)文章
跟我學(xué)習(xí)javascript的this關(guān)鍵字
跟我學(xué)習(xí)javascript的this關(guān)鍵字，this是動(dòng)態(tài)綁定，或稱為運(yùn)行期綁定的，這就導(dǎo)致 JavaScript中的this關(guān)鍵字有能力具備多重含義，帶來(lái)靈活性的同時(shí)，也為初學(xué)者帶來(lái)不少困惑2015-11-11
javascript中錯(cuò)誤使用var造成undefined
這篇文章主要介紹了javascript中錯(cuò)誤使用var造成undefined的原因，實(shí)例分析了錯(cuò)誤使用var造成undefined的過(guò)程，感興趣的小伙伴們可以參考一下2016-03-03
使用JavaScript實(shí)現(xiàn)按鈕的漣漪效果實(shí)例代碼
近來(lái)看到個(gè)不錯(cuò)的按鈕點(diǎn)擊效果,當(dāng)點(diǎn)擊時(shí)產(chǎn)生一次水波漣漪效果,挺好玩的,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)按鈕漣漪效果的相關(guān)資料,需要的朋友可以參考下2022-11-11
在項(xiàng)目中我們會(huì)遇到一次請(qǐng)求多個(gè)接口,當(dāng)所有請(qǐng)求結(jié)束后進(jìn)行操作,也會(huì)遇到多個(gè)請(qǐng)求（大量）同時(shí)進(jìn)行請(qǐng)求資源,這篇文章主要給大家介紹了關(guān)于前端如何控制并發(fā)請(qǐng)求舉例的相關(guān)資料,需要的朋友可以參考下2024-09-09
關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑
許多入前端不久的人都會(huì)遇到removeEventListener無(wú)法清除監(jiān)聽(tīng)的情況,下面這篇文章主要給大家介紹了關(guān)于js中removeEventListener取消事件監(jiān)聽(tīng)的坑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了從一個(gè)Person例子進(jìn)行分析重疊構(gòu)造器模式、Builder模式的使用場(chǎng)景以及運(yùn)用JavaBeans模式彌補(bǔ)重疊構(gòu)造器模式的不足2018-03-03
寫(xiě)了幾年代碼，很少談到j(luò)avascript程序的執(zhí)行效率問(wèn)題，今天就舉幾個(gè)例子看看，讓大家看看程序優(yōu)化是多么重要。 這節(jié)來(lái)看看createElement和innerHTML的表現(xiàn)?？纯床顒e是多大2008-05-05
獲取服務(wù)器傳來(lái)的數(shù)據(jù) 用JS去空格的正則表達(dá)式
獲取服務(wù)器傳來(lái)的數(shù)據(jù) 用JS去空格的正則表達(dá)式，需要的朋友可以參考下2012-03-03
這篇文章主要介紹了淺談Javascript編程風(fēng)格，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
JS 使用 window對(duì)象的print方法實(shí)現(xiàn)分頁(yè)打印功能
這篇文章主要介紹了JS 使用 window對(duì)象的print方法實(shí)現(xiàn)分頁(yè)打印功能，這種方法兼容性比較好，在ie和火狐瀏覽器下都可以正常使用，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05