DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:條件注釋的格式以及作用
CSS教程:條件注釋的格式以及作用
編輯:CSS進階教程     

原文:http://www.qianduan.net/?p=6572
譯自:http://www.divitodesign.com

版權所有,轉載請注明出處,謝謝。

或許你知道,Internet Explorer 6 已經不是最先進的浏覽器了。事實上,它已經八歲了,但是很多人還在使用這個不安全的浏覽器。正因為如此,網頁設計師不得不額外擔心他們的網站在IE6下的表現。

在CSS 框架和模板出現以後,一些布局的問題可以很容易解決掉,但是顯然這不能解決全部問題。這些問題通常可以通過普通的CSS來解決,但是有時候只針對IE顯示一些(樣式)信息可能會更好。

這是用條件注釋是可以實現的。條件注釋只支持Windows系統中的IE浏覽器。通過這些技巧,我們可以為基於Windows的IE5、6、7、8添加一些特殊的行為。這樣做的好處是,HTML和CSS代碼可以通過驗證。

條件注釋的格式

所有可用的條件注釋標簽是基於相同的原理的。這些條件注釋可用於所有的IE浏覽器版本。

<!--[if IE]>
如果用戶使用IE浏覽器,這裡的信息會生效。
<![endif]-->

根據情況不同,你需要添加一個浏覽器版本號。比如,或許你想讓IE5.5使用一個不同的樣式表:

 <!--[if IE 5.5]>
 <link rel="stylesheet" href="css/ie5.css" type="text/css" media="screen, projection" />
<![endif]-->

或者只針對IE7:

 <!--[if IE 7]>
 <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

你已經掌握了要領了,是吧?

我們還能用條件注釋做什麼?

微軟同樣為這些條件注釋添加了一些參數。比如,我們可以使用高於或等於某個版本、低於或等於某個版本。添加這些的確很方便。

比如說,我們要給IE7以及以下的浏覽器添加一個不同的樣式表,我們可以這樣做:

 <!--[if lte IE 7]>
 <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

或者我們想為IE6以上的浏覽器創建一個不同的樣式表:

 <!--[if gte IE 6]>
 <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

我們可以在我們的條件注釋中使用以下參數:

  • lte - 低於或等於
  • lt - 低於
  • gte - 高於或等於
  • gt - 高於
  • (IE6)|(IE7) - Internet Explorer 6或 Internet Explorer 7
  • (IE6)&(IE7) - Internet Explorer 6 和 Internet Explorer 7
  • 點擊這裡查看更多參數

使用條件注釋讓用戶升級他們的過時的浏覽器

我通常不使用條件注釋來修正浏覽器bug。我使用他們的方法是告訴人們,他們使用的是一個過時的浏覽器。在此類信息裡面,我告訴他們,為了安全和更多功能,他們應該升級他們的浏覽器。

 <!--[if lt IE 7]>
<p class="error">警告!您正在使用一款過時的浏覽器。這個版本的浏覽器功能比較簡單而且不夠<strong>安全</strong>。請升級您的浏覽器到<a href="http://getfirefox.org/" href="http://getfirefox.org/">下載FireFox</a> 或 <a href="Internet'>http://www.microsoft.com/downloads/en/default.aspx">
Internet Explorer 7+.</p>
<![endif]-->

通過這種方法,在用戶看到這條消息的時候,你可以告訴用戶,他們不應該使用這個版本的浏覽器,然後他們就可能升級到一個更先進的浏覽器。

正如你看到的這樣,你可以在你的網站中使用這些條件注釋的好處。

前幾天前端觀察發表了一系列的 條件CSS 的用法,那些用法是基於這個條件注釋的擴展用法。當然這種條件注釋的用法比較簡單方便,但是 使用條件css 可以實現更高級的功能。請注意,本文所講的條件注釋可以直接在HTML代碼中使用,而條件CSS需要配合程序實現。——神飛

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved