IE的有條件注釋判定IE版本詳解（附實(shí)例代碼）
更新時(shí)間：2012年01月04日 16:41:40 作者：
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。顧名思義，有條件注釋使你能夠根據(jù)條件（比如瀏覽器版本）顯示代碼塊(不一定就是css，也可以是html代碼，甚至是JavaScript代碼)。
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ù)版本的支持。
IE的有條件注釋及其有效，而且非常容易記住。主要的缺點(diǎn)是這些注釋需要放在HTML頁面中，而不是放在CSS中。這樣，當(dāng)你不需要這些東西，或者有所更改的時(shí)候，就需要維護(hù)很多的地方。
讓我們據(jù)幾個(gè)例子來看看吧——
只有IE才能識(shí)別
因?yàn)橹挥蠭E5以上的版本才開始支持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ì)問，為什么IE7沒有應(yīng)用到效果呢？那是因?yàn)镮E7等于IE7，而不是高于IE7。所有IE7也沒有起效果。
等于或者高于特定版本才能識(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的簡寫，也就是小于的意思。
lte ：就是Less than or equal to的簡寫，也就是小于或等于的意思。
gt ：就是Greater than的簡寫，也就是大于的意思。
gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判斷符相同。
這樣解釋一下，是不是好記多了。
關(guān)于IE條件注釋的特別說明
只有IE才能識(shí)別哦——
曾經(jīng)看到過下面的代碼，現(xiàn)在想起來不禁有點(diǎn)想笑。這樣的代碼有什么意義嗎？
<!--[if !IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
不僅僅是CSS哦
很長時(shí)間，我對這個(gè)都有一種誤解——以為它就是用來根據(jù)瀏覽器不同載入不同css，從而解決樣式兼容性問題的。其實(shí)，我錯(cuò)了。它其實(shí)可以做的更多。它可以保護(hù)任何代碼塊——HTML代碼塊、JavaScript代碼塊、服務(wù)器端代碼……看看下面的代碼。
<!--[if IE]>
你使用的是IE瀏覽器，還會(huì)彈出個(gè)框哦。
<script type="text/javascript"> alert("你使用的是IE瀏覽器！");</script>
<![endif]-->
IE的有條件注釋及其有效，而且非常容易記住。主要的缺點(diǎn)是這些注釋需要放在HTML頁面中，而不是放在CSS中。這樣，當(dāng)你不需要這些東西，或者有所更改的時(shí)候，就需要維護(hù)很多的地方。
讓我們據(jù)幾個(gè)例子來看看吧——
只有IE才能識(shí)別
因?yàn)橹挥蠭E5以上的版本才開始支持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ì)問，為什么IE7沒有應(yīng)用到效果呢？那是因?yàn)镮E7等于IE7，而不是高于IE7。所有IE7也沒有起效果。
等于或者高于特定版本才能識(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的簡寫，也就是小于的意思。
lte ：就是Less than or equal to的簡寫，也就是小于或等于的意思。
gt ：就是Greater than的簡寫，也就是大于的意思。
gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判斷符相同。
這樣解釋一下，是不是好記多了。
關(guān)于IE條件注釋的特別說明
只有IE才能識(shí)別哦——
曾經(jīng)看到過下面的代碼，現(xiàn)在想起來不禁有點(diǎn)想笑。這樣的代碼有什么意義嗎？
復(fù)制代碼 代碼如下:
<!--[if !IE]>
<style type="text/css">
@import "test.css";
</style>
<![endif]-->
不僅僅是CSS哦
很長時(shí)間，我對這個(gè)都有一種誤解——以為它就是用來根據(jù)瀏覽器不同載入不同css，從而解決樣式兼容性問題的。其實(shí)，我錯(cuò)了。它其實(shí)可以做的更多。它可以保護(hù)任何代碼塊——HTML代碼塊、JavaScript代碼塊、服務(wù)器端代碼……看看下面的代碼。
復(fù)制代碼 代碼如下:
<!--[if IE]>
你使用的是IE瀏覽器，還會(huì)彈出個(gè)框哦。
<script type="text/javascript"> alert("你使用的是IE瀏覽器！");</script>
<![endif]-->
相關(guān)文章
JS實(shí)現(xiàn)在線Excel的附件上傳與下載
在本地使用Excel時(shí)，經(jīng)常會(huì)有需要在Excel中添加一些附件文件的需求，今天小編將為大家介紹如何使用前端HTML+JS+CSS技術(shù)通過超鏈接單元格的形式實(shí)現(xiàn)在線Excel附件上傳、下載和修改的操作，需要的可以參考下2023-08-08
獲取圖片尺寸(不設(shè)置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴(yán)重！感興趣的朋友可以參考下2013-09-09
JavaScript和其他語言一樣,都擁有捕獲異常的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS中異常拋出和處理的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
基于element-ui組件手動(dòng)實(shí)現(xiàn)單選和上傳功能
在用戶使用過程中提出一鍵導(dǎo)入的功能，需求如下:點(diǎn)擊導(dǎo)入按鈕顯示提示框，然后是單選框以及上傳按鈕。這篇文章主要介紹了基于element-ui組件手動(dòng)實(shí)現(xiàn)單選和上傳功能,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了淺談JavaScript中的“!!”作用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了js實(shí)現(xiàn)跨域的方法,實(shí)例分析了幾種常用的javascript實(shí)現(xiàn)跨域的技巧,需要的朋友可以參考下2015-06-06
JavaScript圖像放大鏡效果實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖像放大鏡效果實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
用js實(shí)現(xiàn)的記錄鼠標(biāo)的軌跡并回放的效果，非常不錯(cuò)。2010-04-04
淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別
這篇文章主要介紹了淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08