網(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>
更詳細(xì)的信息可以在微軟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的標(biāo)準(zhǔn)化，避免了很多私有CSS屬性作為hack的方式。
可是這樣會增加過多的文件加載，維護(hù)代碼數(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標(biāo)簽，條件注釋也能發(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>親愛的用戶，您的瀏覽器版本過低，建議您升級瀏覽器獲得更好的體驗(yàn)....</p> <![endif]-->
或許還有更多的玩法，就等待您的發(fā)現(xiàn)和分享了。
最后，條件注釋也不僅限于HTML中，JS也可以有，那就是JScript的特性了，這種坑爹的東東還是少用的好，因?yàn)镴S中的注釋總是要被壓縮掉的。
<script> /*@cc_on document.write("You are using IE4 or higher"); @*/ </script>
本文地址：http://m.pkvc.cn/tutorial/wd1433.html
