您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

網(wǎng)頁前端IE條件注釋可以怎么玩

 

如果玩過條件注釋的,可以忽略以下基礎(chǔ)介紹。
IE條件注釋(Conditional comments)是IE瀏覽器私有的代碼,是一個類似IF判斷的語法注釋塊,IE5之上支持。

代碼看起來是這樣的

<!--[if IE 6]>
你正在使用IE6
<![endif]-->

他的語法是一個普通的HTML注釋 <!– comments –>,分支塊以 [if 條件(conditional)]> 開始 <![endif]結(jié)束。條件和JS中的if很類似,布爾值類型,可以把瀏覽器特性作為條件,比如IE ,IE 6, IE 7 ,此外還支持 非(!) 、與(&) 、或(|)、 括號、 大于(gt)、 大于等于(gte)、 小于(le) 、 小于等于(lte)。

直觀的代碼如下:

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

更詳細的信息可以在微軟MSDN文檔中查看

http://msdn.microsoft.com/en-us/library/ms537512.aspx

基礎(chǔ)介紹完畢,這個東西可以做IE瀏覽器檢測,所以變成了CSS兼容多版本瀏覽器的方案之一。

最普遍使用場景1

<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 7]>
<link href="ie7lt.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

既可以解決瀏覽器差異,還可以保證CSS的標準化,避免了很多私有CSS屬性作為hack的方式。
可是這樣會增加過多的文件加載,維護代碼數(shù)量也增加,有沒有更好的方式?

使用場景2

<!--[if lt IE 7]><html class="ie6 oldie" lang="zh"><![endif]-->
<!--[if IE 7]><html class="ie7 oldie" lang="zh"><![endif]-->
<!--[if IE 8]><html class="ie8 oldie" lang="zh"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="zh"> <!--<![endif]-->

場景1中的問題就解決了。通過選擇器的優(yōu)先級就可以輕松解決差異。

有了條件注釋,JS也能從總獲益,免去的通過JS去判斷瀏覽器類型和版本了。

比如:如果你的頁面想使用html5標簽,條件注釋也能發(fā)揮作用。

<!--[if lte IE 8]>
<script>
(function(){
    var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,
footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),
        i= e.length; 
    while(i--){
      document.createElement(e[i]);
    }
 })();
 </script>
 <![endif]-->

再比如:IE6的背景圖片緩存問題

<!--[if IE 6]>
<script>
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->

甚至還可以幫助JS直接獲取瀏覽器信息,大多數(shù)庫和方案識別瀏覽器都是通過userAgent串處理的,而且大部分的應(yīng)用場景也是if (IExx) {doxx}

function isIE(v){
    var v = v || "",
    tester = document.createElement('div');
    tester.innerHTML = '<!--[if IE ' + v + ']><i></i><![endif]-->';
    return !!tester.getElementsByTagName('i')[0];
}

form: http://ninofocus.com/2011/12/09/ie-browse-detect/

還可以在HTML代碼中玩

<body>
<!--[if lte IE 8]>
<p>親愛的用戶,您的瀏覽器版本過低,建議您升級瀏覽器獲得更好的體驗....</p>
<![endif]-->

或許還有更多的玩法,就等待您的發(fā)現(xiàn)和分享了。

最后,條件注釋也不僅限于HTML中,JS也可以有,那就是JScript的特性了,這種坑爹的東東還是少用的好,因為JS中的注釋總是要被壓縮掉的。

<script>
/*@cc_on
  document.write("You are using IE4 or higher");
@*/
</script>
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/wd1433.html
網(wǎng)頁前端開發(fā)browserhacks-集合所有瀏覽器CSS和JavaScript的HACK寫法
[ie bug]解決IE6下不支持li:hover
圖趣網(wǎng)微信
建議反饋
×