本文向大家介紹一下IE7beta2的CSS兼容性問(wèn)題，MS在推出了IE7beta2發(fā)生了一些變化，改進(jìn)和變化會(huì)導(dǎo)致一些原來(lái)正常網(wǎng)頁(yè)出現(xiàn)布局錯(cuò)誤或者原來(lái)可以使用的Hack技巧不再可用。

IE7beta2的CSS兼容性

當(dāng)IE7beta1推出的時(shí)候，我在第一時(shí)間對(duì)它作了個(gè)測(cè)試。當(dāng)時(shí)發(fā)現(xiàn)它對(duì)CSS的支持幾乎沒(méi)有任何變化，著實(shí)失望了一陣。MS在最近推出了IE7beta2，這次有了不少新的改進(jìn)和變化。但這些改進(jìn)和變化會(huì)導(dǎo)致一些原來(lái)正常網(wǎng)頁(yè)出現(xiàn)布局錯(cuò)誤或者原來(lái)可以使用的Hack技巧不再可用。MSDN在年初的時(shí)候把這些可能產(chǎn)生的問(wèn)題羅列給開(kāi)發(fā)者（這是原文），這里我把其中比較主要的問(wèn)題簡(jiǎn)單地描述一下，希望能對(duì)大家有所幫助。

　　◆注意，在IE7正版發(fā)布之前，以下提到所有內(nèi)容都是有可能變化的。

盒模型變了，這恐怕是會(huì)讓那些使用Web標(biāo)準(zhǔn)建設(shè)大型網(wǎng)站的開(kāi)發(fā)者感到背脊發(fā)涼的變化，不過(guò)不用太擔(dān)心，主要的變化是在盒模型對(duì)溢出（overflow）內(nèi)容的處理方法。

　　假設(shè)有一個(gè)100px寬100px高的盒子，在這個(gè)盒子里放一個(gè)200px寬200px高的圖片。目前IE的正理方法是自動(dòng)把盒子“撐大”到200px見(jiàn)方。而IE7beta2的處理方法和FF是一致的：盒子不變，溢出的部分在盒子外面被渲染。也就是說(shuō)盒子的overflow值真正地使用了W3C的默認(rèn)值“visible”。

　　如果你現(xiàn)有的布局是依賴(lài)于IE的“自動(dòng)撐開(kāi)”，那么要小心，很可能會(huì)出現(xiàn)問(wèn)題（特別是動(dòng)態(tài)內(nèi)容的網(wǎng)頁(yè)）。

XML序言（prolog）可能會(huì)影響盒模型

　　大家知道IE有兩種渲染模式：QuirksMode和StrictMode。QuirksMode基本上是非標(biāo)準(zhǔn)的，包括盒模型在內(nèi)，它的渲染方式與W3C的標(biāo)準(zhǔn)有些出入。而StrickMode基本上是標(biāo)準(zhǔn)的（反正都不是絕對(duì)標(biāo)準(zhǔn)也不是絕對(duì)不標(biāo)準(zhǔn)……）。IE6及以前版本會(huì)根據(jù)寫(xiě)在XHTML文檔第一行（也只能是第一行）的DocType聲明來(lái)選擇渲染模式。如果發(fā)現(xiàn)了一個(gè)它能識(shí)別的DocType，比如XHTMLTransitional或者XHTMLStrict等等，它就使用StrictMode來(lái)渲染。其他所有情況下都使用QuirksMode。

　　有些開(kāi)發(fā)者為了顯式地聲明他們的XHTML文檔是一個(gè)XML，會(huì)在文檔的第一行（問(wèn)題就在這里，它也必須在第一行）加上XML的序言（prolog）。比如：

<?xmlversionxmlversion=\"1.0\"encoding=\"gb2312\"?>　  
 

雖然初衷是為了讓文檔更“標(biāo)準(zhǔn)”，但由于IE不認(rèn)這行字，結(jié)果還是按QuirksMode來(lái)渲染。

　　IE7beta2解決這個(gè)問(wèn)題，它會(huì)跳過(guò)prolog來(lái)看檢查DocType。所以可能會(huì)出現(xiàn)IE6及以下版本用QuirksMode渲染而IE7beta2用StrictMode渲染的情況。

　　其實(shí)這個(gè)問(wèn)題容易解決，在現(xiàn)有的環(huán)境下，把prolog直接刪掉就行了，實(shí)在是沒(méi)什么大的用處。當(dāng)然想裝作在使用XHTML，事實(shí)上還是想用QuirksMode的人可能得好好想個(gè)新辦法了^_^

由于改進(jìn)bug而失效的Hack技巧

*html
這是一個(gè)利用IEBug的Hack，如下的寫(xiě)法只有IE會(huì)解析其中的內(nèi)容：

*html{...}*htmlbody{...}現(xiàn)在IEbeta2將和大部隊(duì)一起把它們忽略掉。

◆下劃線(xiàn)Hack

這也是一個(gè)利用IEBug的Hack，如下的寫(xiě)法只有IE會(huì)解析其中的內(nèi)容：

.myclass{  
min-height:300px;  
_height:300px;  
}  
 

現(xiàn)在IEbeta2將不再解析下劃線(xiàn)開(kāi)頭的屬性，但是會(huì)把它當(dāng)作一個(gè)“用戶(hù)自定義”屬性。自定義屬性并不能應(yīng)用到表現(xiàn)上，但是它會(huì)存在于文檔模型中，可以使用腳本來(lái)訪問(wèn)。（這個(gè)特性我還沒(méi)有測(cè)試過(guò)）

◆/**/注釋Hack

這是我最喜歡的Hack技巧之一了。如下的寫(xiě)法在StrictMode下面會(huì)對(duì)IE6透明（IE5.x是會(huì)解析的），但是現(xiàn)在IE7beta2將會(huì)解析它：

.myclass{  
height/**/:300px;  
}  
 

由于增強(qiáng)功能而失效的Hack技巧
原來(lái)IE不支持以下寫(xiě)法，現(xiàn)在可以了：

◆child選擇符Hack

html>body{  
height:300px;  
}相鄰選擇符Hack  
head+body{  
height:300px;  
}相鄰選擇符和first-child偽類(lèi)選擇符  
head:first-child+body{  
height:300px;  
}  
 

這些都算不上什么壞消息，反正我從來(lái)不用這些Hack^_^

頁(yè)面混亂解決方案

　　在MSDN的那篇文章上給出了一些解決方案，從我的角度來(lái)看都是些治標(biāo)不治本、隔靴搔癢的方案。要不用JS來(lái)做CSS的工作，要不只針對(duì)IE來(lái)載入特定的CSS。所以建議大家：等！一等IE7的正式版，在正式版出來(lái)之前，什么都有可能變。二等偉大的CSS社區(qū)的牛牛們找出更多的Hack技巧。IE7不可能做得和FF一模一樣，也不可能和IE6一模一樣，反正總會(huì)有點(diǎn)不一樣的，就利用那點(diǎn)不一樣的東西來(lái)做Hack。

　　雖然用各種Hack是件很無(wú)奈的事情，但現(xiàn)實(shí)就是這樣，我們?cè)谂τ绊戇@個(gè)行業(yè)的同時(shí)只有好好適應(yīng)它，所以私底下很希望能看到用中國(guó)人名字命名的Hack出現(xiàn)。

【編輯推薦】

1. CSS2.0中最常用的18條技巧
2. CSS層疊與繼承用法手冊(cè)
3. DIV布局規(guī)范中CSS類(lèi)及id命名方式
4. 由淺入深學(xué)習(xí)CSS中margin屬性用法
5. 將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧