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" xhref="css.css" />
<!--[if !IE]>
<!– 非IE下調用1.css樣式表 –>
<link rel=」stylesheet」 type=」text/css」 xhref=」1.css」 />
<![endif]–>
<!–[if lt IE 6]>
<!– 若是IE瀏覽器版本小於6,調用2.css樣式表 –>
<link rel=」stylesheet」 type=」text/css」 xhref=」2.css」 />
<![endif]–>

定義什麼瀏覽器下顯示什麼內容。
這個dropmenu（下拉菜單）模型來自cssplay，使通過做者屢次的研究和反覆的測試才作出來的。我想那這個模型來實踐一下條件註釋的原理。
先看一個最簡單的模型
下面是xhtm:

<div class="menu">
<ul>
<li><a class="drop" xhref="../menu/index.html">DEMOS
<!--[if IE 7]><!–>
</a>
<!–<![endif]–>
<!–IE7時顯示</a>標籤–>
<table><tr><td>
<ul>
<li><a xhref=」../menu/zero_dollars.html」 title=」The zero dollar ads page」>zero dollars advertising page</a></li>
<li><a xhref=」../menu/embed.html」 title=」Wrapping text around images」>wrapping text around images</a></li>
<li><a xhref=」../menu/form.html」 title=」Styling forms」>styled form</a></li>
<li><a xhref=」../menu/nodots.html」 title=」Removing active/focus borders」>active focus</a></li>
<li><a class=」drop」 xhref=」../menu/hover_click.html」 title=」Hover/click with no active/focus borders」>hover/click with no borders</li>
<li class=」upone」><a xhref=」../menu/shadow_boxing.html」 title=」Multi-position drop shadow」>shadow boxing</a></li>
<li><a xhref=」../menu/old_master.html」 title=」Image Map for detailed information」>image map for detailed information</a></li>
<li><a xhref=」../menu/bodies.html」 title=」fun with background images」>fun with background images</a></li>
<li><a xhref=」../menu/fade_scroll.html」 title=」fade-out scrolling」>fade scrolling</a></li>
<li><a xhref=」../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" xhref="final_drop.css" />
<!--[if lte IE 6]>
<link rel=」stylesheet」 media=」all」 type=」text/css」 xhref=」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]–>