當(dāng)IE7 beta1推出的時(shí)候,我在第一時(shí)間對(duì)它作了個(gè)測(cè)試。當(dāng)時(shí)發(fā)現(xiàn)它對(duì)CSS的支持幾乎沒有任何變化,著實(shí)失望了一陣。MS在最近推出了IE7 beta2,這次有了不少新的改進(jìn)和變化。但這些改進(jìn)和變化會(huì)導(dǎo)致一些原來正常網(wǎng)頁(yè)出現(xiàn)布局錯(cuò)誤或者原來可以使用的Hack技巧不再可用。MSDN在年初的時(shí)候把這些可能產(chǎn)生的問題羅列給開發(fā)者(這是原文),這里我把其中比較主要的問題簡(jiǎn)單地描述一下,希望能對(duì)大家有所幫助。
注意,在IE7正版發(fā)布之前,以下提到所有內(nèi)容都是有可能變化的。
盒模型變了?。?!
這恐怕是會(huì)讓那些使用Web標(biāo)準(zhǔn)建設(shè)大型網(wǎng)站的開發(fā)者感到背脊發(fā)涼的變化,不過不用太擔(dān)心,主要的變化是在盒模型對(duì)溢出(overflow)內(nèi)容的處理方法。
假設(shè)有一個(gè)100px寬100px高的盒子,在這個(gè)盒子里放一個(gè)200px寬200px高的圖片。目前IE的正理方法是自動(dòng)把盒子“撐大”到200px見方。而IE7 beta2的處理方法和FF是一致的:盒子不變,溢出的部分在盒子外面被渲染。也就是說盒子的overflow值真正地使用了W3C的默認(rèn)值“visible”。
如果你現(xiàn)有的布局是依賴于IE的“自動(dòng)撐開”,那么要小心,很可能會(huì)出現(xiàn)問題(特別是動(dòng)態(tài)內(nèi)容的網(wǎng)頁(yè))。
XML序言(prolog)可能會(huì)影響盒模型
Oh,My GOD!又是盒模型!
大家知道IE有兩種渲染模式:Quirks Mode和Strict Mode。Quirks Mode基本上是非標(biāo)準(zhǔn)的,包括盒模型在內(nèi),它的渲染方式與W3C的標(biāo)準(zhǔn)有些出入。而Strick Mode基本上是標(biāo)準(zhǔn)的(反正都不是絕對(duì)標(biāo)準(zhǔn)也不是絕對(duì)不標(biāo)準(zhǔn)……)。IE6及以前版本會(huì)根據(jù)寫在XHTML文檔第一行(也只能是第一行)的DocType聲明來選擇渲染模式。如果發(fā)現(xiàn)了一個(gè)它能識(shí)別的DocType,比如XHTML Transitional或者XHTML Strict等等,它就使用Strict Mode來渲染。其他所有情況下都使用Quirks Mode。
有些開發(fā)者為了顯式地聲明他們的XHTML文檔是一個(gè)XML,會(huì)在文檔的第一行(問題就在這里,它也必須在第一行)加上XML的序言(prolog)。比如:
?xml version="1.0" encoding="gb2312"?>
雖然初衷是為了讓文檔更“標(biāo)準(zhǔn)”,但由于IE不認(rèn)這行字,結(jié)果還是按Quirks Mode來渲染。
IE7 beta2解決這個(gè)問題,它會(huì)跳過prolog來看檢查DocType。所以可能會(huì)出現(xiàn)IE6及以下版本用Quirks Mode渲染而IE7 beta2用Strict Mode渲染的情況。
其實(shí)這個(gè)問題容易解決,在現(xiàn)有的環(huán)境下,把prolog直接刪掉就行了,實(shí)在是沒什么大的用處。當(dāng)然想裝作在使用XHTML,事實(shí)上還是想用Quirks Mode的人可能得好好想個(gè)新辦法了^_^
由于改進(jìn)bug而失效的Hack技巧
* html
這是一個(gè)利用IE Bug的Hack,如下的寫法只有IE會(huì)解析其中的內(nèi)容:
* html{...}
* html body{...}
現(xiàn)在IE beta2將和大部隊(duì)一起把它們忽略掉。
下劃線Hack
這也是一個(gè)利用IE Bug的Hack,如下的寫法只有IE會(huì)解析其中的內(nèi)容:
.myclass{
min-height:300px;
_height:300px;
}
現(xiàn)在IE beta2將不再解析下劃線開頭的屬性,但是會(huì)把它當(dāng)作一個(gè)“用戶自定義”屬性。自定義屬性并不能應(yīng)用到表現(xiàn)上,但是它會(huì)存在于文檔模型中,可以使用腳本來訪問。(這個(gè)特性我還沒有測(cè)試過)
/**/注釋Hack
這是我最喜歡的Hack技巧之一了。如下的寫法在Strict Mode下面會(huì)對(duì)IE6透明(IE5.x是會(huì)解析的),但是現(xiàn)在IE7 beta2將會(huì)解析它:
.myclass{
height/**/:300px;
}
由于增強(qiáng)功能而失效的Hack技巧
原來IE不支持以下寫法,現(xiàn)在可以了:
child選擇符Hack
html > body{
height:300px;
}
相鄰選擇符Hack
head + body{
height:300px;
}
相鄰選擇符和first-child偽類選擇符
head:first-child + body{
height:300px;
}
這些都算不上什么壞消息,反正我從來不用這些Hack^_^
俺的頁(yè)面亂咧,咋辦?
在MSDN的那篇文章上給出了一些解決方案,從我的角度來看都是些治標(biāo)不治本、隔靴搔癢的方案。要不用JS來做CSS的工作,要不只針對(duì)IE來載入特定的CSS。所以建議大家:等!一等IE7的正式版,在正式版出來之前,什么都有可能變。二等偉大的CSS社區(qū)的牛牛們找出更多的Hack技巧。IE7不可能做得和FF一模一樣,也不可能和IE6一模一樣,反正總會(huì)有點(diǎn)不一樣的,就利用那點(diǎn)不一樣的東西來做Hack。
雖然用各種Hack是件很無奈的事情,但現(xiàn)實(shí)就是這樣,我們?cè)谂τ绊戇@個(gè)行業(yè)的同時(shí)只有好好適應(yīng)它,所以私底下很希望能看到用中國(guó)人名字命名的Hack出現(xiàn)。
Fight!
您可能感興趣的文章:- 使css兼容IE8的小技巧
- 多瀏覽器css兼容分析小結(jié)
- CSS兼容要點(diǎn)分析
- Css瀏覽器兼容的解決方法