?
このドキュメントでは、 php中國語ネットマニュアル リリース
語法:
<!--[if <keywords>? IE <version>?]> HTML代碼塊 <![endif]-->
取值:
<keywords>
if條件共包含6種選擇方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
是否:指定是否IE或IE某個(gè)版本。關(guān)鍵字:空
大于:選擇大于指定版本的IE版本。關(guān)鍵字:gt(greater than)
大于或等于:選擇大于或等于指定版本的IE版本。關(guān)鍵字:gte(greater than or equal)
小于:選擇小于指定版本的IE版本。關(guān)鍵字:lt(less than)
小于或等于:選擇小于或等于指定版本的IE版本。關(guān)鍵字:lte(less than or equal)
非指定版本:選擇除指定版本外的所有IE版本。關(guān)鍵字:!
<version>
目前的常用IE版本為6.0及以上,推薦酌情忽略低版本,把精力花在為使用高級瀏覽器的用戶提供更好的體驗(yàn)上
IE10及以上版本已將條件注釋特性移除,使用時(shí)需注意。
if條件Hack是HTML級別的(包含但不僅是CSS的Hack,可以選擇任何HTML代碼塊)
如不想在非IE中看到某區(qū)域,可這樣寫:
<!--[if IE]> <p>你在非IE中將看不到我的身影</p> <![endif]-->
上述p代碼塊,將只在IE中可見。
if條件6種選擇方式的使用示例(下述代碼中被條件注釋包含的HTML代碼塊也可以是link標(biāo)記):
是否,示例代碼:
<!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
在上述代碼中,只有IE瀏覽,才能看到應(yīng)用了test類的元素是紅色文本。
大于,示例代碼:
<!--[if gt IE 6]> <style> .test{color:red;} </style> <![endif]-->
在上述代碼中,只有IE6以上,才能看到應(yīng)用了test類的元素是紅色文本。
大于或等于,示例代碼:
<!--[if gte IE 6]> <style> .test{color:red;} </style> <![endif]-->
在上述代碼中,只有IE6以上(含IE6),才能看到應(yīng)用了test類的元素是紅色文本。
小于,示例代碼:
<!--[if lt IE 7]> <style> .test{color:red;} </style> <![endif]-->
在上述代碼中,只有IE7以下,才能看到應(yīng)用了test類的元素是紅色文本。
小于或等于,示例代碼:
<!--[if lte IE 7]> <style> .test{color:red;} </style> <![endif]-->
在上述代碼中,只有IE7以下(含IE7),才能看到應(yīng)用了test類的元素是紅色文本。
非指定版本,示例代碼:
<!--[if ! IE 7]> <style> .test{color:red;} </style> <![endif]-->
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>if條件Hack_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{margin:10px 0;font-size:16px;} span{display:none;} .not-ie{display:inline;} </style> <!--[if IE]> <style> .ie{display:inline;} .not-ie{display:none;} </style> <![endif]--> <!--[if IE 5]> <style> .ie5{display:inline;} </style> <![endif]--> <!--[if IE 6]> <style> .ie6{display:inline;} </style> <![endif]--> <!--[if IE 7]> <style> .ie7{display:inline;} </style> <![endif]--> <!--[if IE 8]> <style> .ie8{display:inline;} </style> <![endif]--> <!--[if IE 9]> <style> .ie9{display:inline;} </style> <![endif]--> </head> <body> <div> 您正在使用 <span class="not-ie">非IE</span> <span class="ie">IE</span> <span class="ie5">5</span> <span class="ie6">6</span> <span class="ie7">7</span> <span class="ie8">8</span> <span class="ie9">9</span> 瀏覽器 </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例