關于IE瀏覽器和非IE瀏覽器的條件注釋理論及實踐

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]-->
所以在IE6下鼠標滑過時候在通過a:hover來顯示那個ul內容
而IE7下通過li:hover顯示的效果一樣

下面是作者的原模型（三級菜單縱向和相結合的）
就是在簡單模型的基礎上復雜化

預覽模型

下載相關文件：點擊下載