瀏覽器條件注釋的話題已經(jīng)是老生常談了,,以前曾發(fā)過(guò)一篇IE和非IE瀏覽器的條件注釋,但只提了demo,,分析的不夠詳盡,。今天又重新研究了一下這個(gè)話題,發(fā)現(xiàn)下面的一篇譯文對(duì) 在IE5.0/IE5.5/IE6中使用條件注釋 分析得十分透徹(目前IE7 Beta對(duì)條件注釋支持還不是很好,,尚等待正式版的發(fā)行):
條件注釋只能用于Explorer 5+ Windows(以下簡(jiǎn)稱IE),。
如果你安裝了多個(gè)IE,條件注釋(Conditional comments)將會(huì)以最高版本的IE為標(biāo)準(zhǔn)(一般為IE 6),。
我聽說(shuō)(但沒(méi)測(cè)試過(guò)),,當(dāng)在條件注釋中使用了小數(shù)點(diǎn),且只安裝了IE5.0的時(shí)候,,將會(huì)產(chǎn)生一個(gè)不正確的判斷,。
條件注釋只能在windows Internet Explorer(以下簡(jiǎn)稱IE)下使用,因此我們可以通過(guò)條件注釋來(lái)為IE添加特別的指令,。條件注釋從IE5開始被支持,,它可能在IE5.0,5.5,6里有區(qū)別。
我(譯者注:指作者)自己也在頂層的框架中使用了一些條件注釋,。如果你以源代碼形式查看本頁(yè),,你將會(huì)看到:
- <!--[if IE]>
- <style>
- div.logo {
- margin-left: 10px;
- }
- </style>
- <![endif]-->
以上代碼的作用是:
一般情況下,div.logo的left
margin將為22px,。但是,,IE有個(gè)BUG,就是當(dāng)它碰到浮動(dòng)元素(floated
elements)的margins時(shí)候,,它將會(huì)以2倍于該元素的實(shí)際margin值來(lái)處理,。所以我要告訴IE,這個(gè)元素是10px(10?11?),。于
是我用條件注釋告訴了它,。
這些代碼例子將會(huì)概括性地說(shuō)明你能如何使用條件注釋以及你不能如何使用條件注釋。
1. 條件注釋的基本結(jié)構(gòu)和HTML的注釋(<!– –>)是一樣的,。因此IE以外的瀏覽器將會(huì)把它們看作是普通的注釋而完全忽略它們,。
2. IE將會(huì)根據(jù)if條件來(lái)判斷是否如解析普通的頁(yè)面內(nèi)容一樣解析條件注釋里的內(nèi)容。
3.
條件注釋使用的是HTML的注釋結(jié)構(gòu),,因此他們只能使用在HTML文件里,,而不能在CSS文件中使用。我很想把所有特殊的樣式放在logo.css里,。但
是很不幸的是,,這看起來(lái)不太可能。我也試過(guò)根據(jù)條件注釋,,使用<link>來(lái)導(dǎo)入一個(gè)額外的樣式表,,但是因?yàn)槲抑恍枰粋€(gè)額外的樣式規(guī)則,,這
樣會(huì)讓事情變得復(fù)雜很多。當(dāng)然如果你需要在IE里使用很多的額外的樣式,,那么使用<link>或許是一個(gè)好的方法,。
例子:下面我放置了一些條件判斷來(lái)根據(jù)你的IE版本來(lái)輸出相應(yīng)信息。
代碼如下:
- <!--[if IE]>
- 根據(jù)條件判斷,,這是Internet Explorer<br />
- < ![endif]-->
- <!--[if IE 5]>
- 根據(jù)條件判斷,,這是Internet Explorer 5<br />
- < ![endif]-->
- <!--[if IE 5.0]>
- 根據(jù)條件判斷,這是Internet Explorer 5.0<br />
- < ![endif]-->
- <!--[if IE 5.5]>
- 根據(jù)條件判斷,,這是Internet Explorer 5.5<br />
- < ![endif]-->
- <!--[if IE 6]>
- 根據(jù)條件判斷,,這是Internet Explorer 6<br />
- < ![endif]-->
- <!--[if gte IE 5]>
- 根據(jù)條件判斷,這是Internet Explorer 5 或者更高<br />
- < ![endif]-->
- <!--[if lt IE 6]>
- 根據(jù)條件判斷,,這是版小于6的Internet Explorer<br />
- < ![endif]-->
- <!--[if lte IE 5.5]>
- 根據(jù)條件判斷,,這是Internet Explorer 5.5或更低<br />
- < ![endif]-->
注意兩個(gè)特殊的語(yǔ)法:
* gt: 大于
* lte: 小于或等于
CSS hack?條件判斷屬于CSS hack嗎,?嚴(yán)格地說(shuō)是屬于CSS hack,。因?yàn)榫秃孟笃渌嬲腸ss
hack一樣,它使得我們可以給一些瀏覽器賦予特殊的樣式,,再則它不依賴于某個(gè)瀏覽器的BUG來(lái)控制另外一個(gè)瀏覽器(的樣式),。除此之外,條件判斷還能用
來(lái)做一些超出CSS HACK范圍的事情(雖然這種情況很少發(fā)生),。
因?yàn)闂l件判斷不依賴于某個(gè)瀏覽器的hack,,而是一個(gè)經(jīng)過(guò)深思熟慮的特色功能,,所以我相信它是可以被放心地使用的,。當(dāng)然,其他瀏覽器也有可能支持條件判斷(到目前為止還沒(méi)有),,但是看起來(lái),,他們應(yīng)該不會(huì)使用如<!–[if IE]>這樣的語(yǔ)法。
我很節(jié)儉地使用條件判斷,。首先我會(huì)嘗試著去尋找在IE上一個(gè)真正的CSS解決方法,。如果找不到,我將會(huì)毫不猶豫地使用條件判斷,。