css條件注釋理論及實踐源檔案_經驗交流

來源:互聯網
上載者:User
瀏覽器的條件注釋理論,用下面一段例子來解釋這個問題

(X)HTML

下面一段代碼是測試在微軟的IE瀏覽器下的條件備註陳述式的效果








下面的代碼是在非IE瀏覽器下啟動並執行條件注釋


您使用不是 Internet Explorer



最終在非IE和特殊的IE瀏覽器下起作用
(或者使用 lte lt 或者 gt gte來判斷,如:

).


您正在使用Internet Explorer version 6

或者 一個非IE 瀏覽器




From:cssplay.co.uk/menu/conditional.html" target="_blank">http://www.cssplay.co.uk/menu/conditional.html

上面提到了條件注釋,就是判斷瀏覽器類型,然後定義什麼瀏覽器下顯示什麼內容。

這個dropmenu(下拉式功能表)模型來自cssplay,使經過作者多次的研究和反覆的測試才做出來的。我想那這個模型來實踐一下條件注釋的原理。

先看一個最簡單的模型

下面是xhtm


  • DEMOS






    • zero dollars advertising page

    • wrapping text around images

    • styled form

    • active focus

    • hover/click with no borders

    • shadow boxing

    • image map for detailed information

    • fun with background images

    • fade scrolling

    • em image sizes compared











CSS



採用雙樣式,給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不顯示
因為

所以在IE6下滑鼠滑過時候在通過a:hover來顯示那個ul內容
而IE7下通過li:hover顯示的效果一樣
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.