css條件註釋理論及實踐源文件_經驗交流

瀏覽器的條件註解理論，用下面一段例子來解釋這個問題

(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

• 演示
  
  
  
  
  
  
  

  
  
  • 零美元廣告頁面
  
  
  • 在圖片周圍環繞文字
  
  
  • 樣式表單
  
  
  • 活動焦點 li>
    
  • 懸停/點擊，無邊框
  
  
  • 太極拳
  詳細資料圖片地圖
  
  • 背景圖片的樂趣
  
  
  • 淡出滾動
  
  
  • em 圖像尺寸比較
  
  

  
  
  
  
  
  

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顯示的效果一樣