CSS條件注釋

由于浏覽器版本的不同，對CSS裏某些元素的解釋也不一樣，針對浏覽器版本不同而選擇不同CSS的代碼， 其實我們還可以利用條件注釋的方法來達到類似的目的，什麽是條件注釋，在此簡單介紹一下，無非就是一些if判斷啦，呵呵，但這些判斷不是在腳本裏執行的，而是直接在html代碼裏執行的，下面來介紹一下使用方法吧。 <!--[if XXX]> 這裏是正常的html代碼 <![endif]–> 這裏XXX是一些特定的東東，在此列表幾個出來，詳細介紹各自的含義： <!–[if IE]> / 如果浏覽器是IE / <!–[if IE 5]> / 如果浏覽器是IE 5 的版本 / <!–[if IE 6]> / 如果浏覽器是IE 6 的版本 / <!–[if IE 7]> / 如果浏覽器是IE 7 的版本 / 上面是幾個常用的判斷IE浏覽器版本的語法，下面再來介紹一下相對比較少用的邏輯判斷的參數： 有幾個參數：lte，lt，gte，gt及! 各自的詳細解釋如下： lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。 lt ：就是Less than的簡寫，也就是小于的意思。 gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。 gt ：就是Greater than的簡寫，也就是大于的意思。 例句: <!--[if gt IE 5.5]> / 如果IE版本大于5.5 / <!–[if lte IE 6]> / 如果IE版本小于等于6 / <!–[if !IE]> / 如果浏覽器不是IE / 看到這裏相信大家都已經明白了條件注釋的用法了，OK，那來舉個例子吧： <!-- 默認先調用css.css樣式表 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if !IE]> <!– 非IE下調用1.css樣式表 –> <link rel=」stylesheet」 type=」text/css」 href=」1.css」 /> <![endif]–> <!–[if lt IE 6]> <!– 如果IE浏覽器版本小于6,調用2.css樣式表 –> <link rel=」stylesheet」 type=」text/css」 href=」2.css」 /> <![endif]–> 定義什麽浏覽器下顯示什麽內容。 這個dropmenu（下拉菜單）模型來自cssplay，使經過作者多次的研究和反複的測試才做出來的。我想那這個模型來實踐一下條件注釋的原理。 先看一個最簡單的模型 下面是xhtm: <div class="menu"> <ul> <li><a class="drop" href="../menu/index.html">DEMOS <!--[if IE 7]><!–> </a> <!–<![endif]–> <!–IE7時顯示</a>標簽–> <table><tr><td> <ul> <li><a href=」../menu/zero_dollars.html」 title=」The zero dollar ads page」>zero dollars advertising page</a></li> <li><a href=」../menu/embed.html」 title=」Wrapping text around images」>wrapping text around images</a></li> <li><a href=」../menu/form.html」 title=」Styling forms」>styled form</a></li> <li><a href=」../menu/nodots.html」 title=」Removing active/focus borders」>active focus</a></li> <li><a class=」drop」 href=」../menu/hover_click.html」 title=」Hover/click with no active/focus borders」>hover/click with no borders</li> <li class=」upone」><a href=」../menu/shadow_boxing.html」 title=」Multi-position drop shadow」>shadow boxing</a></li> <li><a href=」../menu/old_master.html」 title=」Image Map for detailed information」>image map for detailed information</a></li> <li><a href=」../menu/bodies.html」 title=」fun with background images」>fun with background images</a></li> <li><a href=」../menu/fade_scroll.html」 title=」fade-out scrolling」>fade scrolling</a></li> <li><a href=」../menu/em_images.html」 title=」em size images compared」>em image sizes compared</a></li> </ul> </td></tr></table> <!–[if lte IE 6]> </a> <![endif]–> </li> <!–IE6時顯示</a>標簽–> </ul> </div> CSS <link rel="stylesheet" media="all" type="text/css" href="final_drop.css" /> <!--[if lte IE 6]> <link rel=」stylesheet」 media=」all」 type=」text/css」 href=」final_drop_ie.css」 /> <![endif]–> 采用雙樣式，給ie和非ie分別定義樣式，如果IE時候，在final_drop.css基礎上補充一個final_drop_ie.css 先看看非ie下的css是怎樣定義的 .menu ul li ul { display: none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#fff; background:#bd8d5e; } /*定義鼠標滑過樣式*/ .menu ul li:hover ul { display:block; position:absolute; top:3em; margin-top:1px; left:0; width:150px; } 在非IE下，看到鼠標滑過時候li包含的ul顯示了，因爲這些浏覽器支持li:hover用法 IE下的css .menu ul li a:hover { color:#fff; background:#bd8d5e; } /*當鼠標滑過時li包含的ul顯示*/ .menu ul li a:hover ul { display:block; position:absolute; top:3em; left:0; background:#fff; margin-top:0; marg\in-top:1px; } 繼承上面的final_drop.css樣式，無鼠標時間時候li包含的ul不顯示 因爲 <!--[if lte IE 6]> </a> <![endif]–>