| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS條件注釋

來源:互聯網  2008-08-19 06:51:06  評論

由于浏覽器版本的不同,對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]–>

由于浏覽器版本的不同,對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]–>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有