分享
 
 
 

CSS條件註釋

王朝html/css/js·作者佚名  2008-08-19
窄屏简体版  字體: |||超大  

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

 
 
 
免責聲明:本文為網絡用戶發布,其觀點僅代表作者個人觀點,與本站無關,本站僅提供信息存儲服務。文中陳述內容未經本站證實,其真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
2023年上半年GDP全球前十五強
 百态   2023-10-24
美眾議院議長啟動對拜登的彈劾調查
 百态   2023-09-13
上海、濟南、武漢等多地出現不明墜落物
 探索   2023-09-06
印度或要將國名改為「巴拉特」
 百态   2023-09-06
男子為女友送行,買票不登機被捕
 百态   2023-08-20
手機地震預警功能怎麽開?
 干货   2023-08-06
女子4年賣2套房花700多萬做美容:不但沒變美臉,面部還出現變形
 百态   2023-08-04
住戶一樓被水淹 還衝來8頭豬
 百态   2023-07-31
女子體內爬出大量瓜子狀活蟲
 百态   2023-07-25
地球連續35年收到神秘規律性信號,網友:不要回答!
 探索   2023-07-21
全球鎵價格本周大漲27%
 探索   2023-07-09
錢都流向了那些不缺錢的人,苦都留給了能吃苦的人
 探索   2023-07-02
倩女手遊刀客魅者強控制(強混亂強眩暈強睡眠)和對應控制抗性的關系
 百态   2020-08-20
美國5月9日最新疫情:美國確診人數突破131萬
 百态   2020-05-09
荷蘭政府宣布將集體辭職
 干货   2020-04-30
倩女幽魂手遊師徒任務情義春秋猜成語答案逍遙觀:鵬程萬裏
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案神機營:射石飲羽
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案昆侖山:拔刀相助
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案天工閣:鬼斧神工
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案絲路古道:單槍匹馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:與虎謀皮
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案鎮郊荒野:指鹿為馬
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:小鳥依人
 干货   2019-11-12
倩女幽魂手遊師徒任務情義春秋猜成語答案金陵:千金買鄰
 干货   2019-11-12
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有