css 條件注釋使用指南
發(fā)布時間:2010-01-16 23:24:31 作者:佚名
我要評論

或許你知道,Internet Explorer 6 已經(jīng)不是最先進的瀏覽器了。事實上,它已經(jīng)八歲了,但是很多人還在使用這個不安全的瀏覽器。正因為如此,網(wǎng)頁設計師不得不額外擔心他們的網(wǎng)站在IE6下的表現(xiàn)。
在CSS 框架和模板出現(xiàn)以后,一些布局的問題可以很容易解決掉,但是顯然這不能解決全部問題。這些問題通??梢酝ㄟ^普通的CSS來解決,但是有時候只針對IE顯示一些(樣式)信息可能會更好。
這是用條件注釋是可以實現(xiàn)的。條件注釋只支持Windows系統(tǒng)中的IE瀏覽器。通過這些技巧,我們可以為基于Windows的IE5、6、7、8添加一些特殊的行為。這樣做的好處是,HTML和CSS代碼可以通過驗證。
條件注釋的格式
所有可用的條件注釋標簽是基于相同的原理的。這些條件注釋可用于所有的IE瀏覽器版本。
<!--[if IE]>
如果用戶使用IE瀏覽器,這里的信息會生效。
<![endif]-->
根據(jù)情況不同,你需要添加一個瀏覽器版本號。比如,或許你想讓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]-->
你已經(jīng)掌握了要領了,是吧?
我們還能用條件注釋做什么?
微軟同樣為這些條件注釋添加了一些參數(shù)。比如,我們可以使用高于或等于某個版本、低于或等于某個版本。添加這些的確很方便。
比如說,我們要給IE7以及以下的瀏覽器添加一個不同的樣式表,我們可以這樣做:
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
或者我們想為IE6以上的瀏覽器創(chuàng)建一個不同的樣式表:
<!--[if gte IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
我們可以在我們的條件注釋中使用以下參數(shù):
lte – 低于或等于
lt – 低于
gte – 高于或等于
gt – 高于
(IE6)|(IE7) – Internet Explorer 6或 Internet Explorer 7
(IE6)&(IE7) – Internet Explorer 6 和 Internet Explorer 7
更多函數(shù)
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
使用條件注釋讓用戶升級他們的過時的瀏覽器
我通常不使用條件注釋來修正瀏覽器bug。我使用他們的方法是告訴人們,他們使用的是一個過時的瀏覽器。在此類信息里面,我告訴他們,為了安全和更多功能,他們應該升級他們的瀏覽器。
<!--[if lt IE 7]>
<p class="error">警告!您正在使用一款過時的瀏覽器。這個版本的瀏覽器功能比較簡單而且不夠<strong>安全</strong>。請升級您的瀏覽器到<a >下載FireFox</a> 或 <a >Internet Explorer 7+.</p>
<![endif]-->
通過這種方法,在用戶看到這條消息的時候,你可以告訴用戶,他們不應該使用這個版本的瀏覽器,然后他們就可能升級到一個更先進的瀏覽器。
正如你看到的這樣,你可以在你的網(wǎng)站中使用這些條件注釋的好處。
前幾天前端觀察發(fā)表了一系列的條件CSS的用法,那些用法是基于這個條件注釋的擴展用法。當然這種條件注釋的用法比較簡單方便,但是使用條件css可以實現(xiàn)更高級的功能。請注意,本文所講的條件注釋可以直接在HTML代碼中使用,而條件CSS需要配合程序實現(xiàn)。——神飛
這是用條件注釋是可以實現(xiàn)的。條件注釋只支持Windows系統(tǒng)中的IE瀏覽器。通過這些技巧,我們可以為基于Windows的IE5、6、7、8添加一些特殊的行為。這樣做的好處是,HTML和CSS代碼可以通過驗證。
條件注釋的格式
所有可用的條件注釋標簽是基于相同的原理的。這些條件注釋可用于所有的IE瀏覽器版本。
復制代碼
代碼如下:<!--[if IE]>
如果用戶使用IE瀏覽器,這里的信息會生效。
<![endif]-->
根據(jù)情況不同,你需要添加一個瀏覽器版本號。比如,或許你想讓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]-->
你已經(jīng)掌握了要領了,是吧?
我們還能用條件注釋做什么?
微軟同樣為這些條件注釋添加了一些參數(shù)。比如,我們可以使用高于或等于某個版本、低于或等于某個版本。添加這些的確很方便。
比如說,我們要給IE7以及以下的瀏覽器添加一個不同的樣式表,我們可以這樣做:
復制代碼
代碼如下:<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
或者我們想為IE6以上的瀏覽器創(chuàng)建一個不同的樣式表:
復制代碼
代碼如下:<!--[if gte IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
我們可以在我們的條件注釋中使用以下參數(shù):
復制代碼
代碼如下:lte – 低于或等于
lt – 低于
gte – 高于或等于
gt – 高于
(IE6)|(IE7) – Internet Explorer 6或 Internet Explorer 7
(IE6)&(IE7) – Internet Explorer 6 和 Internet Explorer 7
更多函數(shù)
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
使用條件注釋讓用戶升級他們的過時的瀏覽器
我通常不使用條件注釋來修正瀏覽器bug。我使用他們的方法是告訴人們,他們使用的是一個過時的瀏覽器。在此類信息里面,我告訴他們,為了安全和更多功能,他們應該升級他們的瀏覽器。
復制代碼
代碼如下:<!--[if lt IE 7]>
<p class="error">警告!您正在使用一款過時的瀏覽器。這個版本的瀏覽器功能比較簡單而且不夠<strong>安全</strong>。請升級您的瀏覽器到<a >下載FireFox</a> 或 <a >Internet Explorer 7+.</p>
<![endif]-->
通過這種方法,在用戶看到這條消息的時候,你可以告訴用戶,他們不應該使用這個版本的瀏覽器,然后他們就可能升級到一個更先進的瀏覽器。
正如你看到的這樣,你可以在你的網(wǎng)站中使用這些條件注釋的好處。
前幾天前端觀察發(fā)表了一系列的條件CSS的用法,那些用法是基于這個條件注釋的擴展用法。當然這種條件注釋的用法比較簡單方便,但是使用條件css可以實現(xiàn)更高級的功能。請注意,本文所講的條件注釋可以直接在HTML代碼中使用,而條件CSS需要配合程序實現(xiàn)。——神飛
相關文章
- 本文將為你總結CSS針對各瀏覽器的兼容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.2010-07-04
- IE瀏覽器的條件注釋雖不太常用,卻異常強大,不僅可以用來區(qū)分IE瀏覽器版本2010-03-05
- ie10已經(jīng)上線一段時間了,相信已經(jīng)有一部分前端潮人體驗過了,截至到現(xiàn)在,在ie6到ie9的瀏覽器各種各樣的古怪行為,開發(fā)人員不得不使用條件注釋,有條件的類,和其他特定于I2012-12-11
- 原文:http://www.qianduan.net/?p=6572 譯自:http://www.divitodesign.com 版權所有,轉載請注明出處,謝謝。 或許你知道,Internet Explorer 6 已經(jīng)不是最先進的瀏覽器2009-03-26
- 網(wǎng)頁制作Webjx文章簡介:在CSS 框架和模板出現(xiàn)以后,一些布局的問題可以很容易解決掉,但是顯然這不能解決全部問題。這些問題通??梢酝ㄟ^普通的CSS來解決,但是有時候只針2009-04-02
- 這篇文章主要介紹了CSS條件注釋詳解(根據(jù)不同瀏覽器加載CSS)這也是現(xiàn)階段最方便的各種瀏覽器兼容方式了,需要的朋友可以參考下2015-01-09