IE7.0RC1,CSS相容(ie6,ff瀏覽器)解決方案

[ 本文轉載自：Bible's Blog ]

首先聲明在我這篇文章發表時，IE7.0及以上目前有四個版本，分別是Ie7.0beta1,Ie7.0beta2,Ie7.0beta3,Ie7.0 RC。這四個版本本身也存在對CSS相容的不同。特別是beta1,beta2與RC版本的有很大差異。

通過我自己對IE7.0RC做的測試。發現IE7RC已經解決了許多在IE6存在的bug,比如使用左漂浮並且使用了margin-left，此margin的數值加倍bug。還解決了IE6.0不認!important優先權的問題，此外還有比如兩DIV之間margin,padding都已經被置0。

但是如果相鄰的那個DIV使用的文字物件，文字物件會自動產生3px空隙，類似這種很多細節bug都在IE7RC中有了好的解決。

下面要繼續談如何使你的頁面通過IE7RC的測試。在談這個話題前，請容我在這裡發句牢騷：還有什麼比在多個不同瀏覽器上測試CSS更痛苦的事情？ 那就是在多個不同瀏覽器的多個不同版本上測試CSS！

因為有最新訊息放出IE7在這個月應該還會放出一個RC（Release Candidate）版本，（具體情況請參考：IE7 TEAM BLOG：http://blogs.msdn.com/ie/），在我們不知道最新的之前，暫且以下都以IE 7.0.5700.6 Release Candidate（點擊下載）為準。

注意！此IE7.0安裝後重新啟動後可能導致你無法進入WINDOWS，如果你使用了已破解的WINDOWS或正版WINDOWS（即你當前所在系統可線上更新WINDOWS系統的）就可以放心安裝。

安裝後，它會直接覆蓋IE6.0。也就是說你就暫時不能用IE6.0瀏覽器了。如果你是測試或開發人員，要同時在IE6和IE7下測試你的頁面，可以下載IE各版本的獨立版本的IE瀏覽器（包括ie3_9x.zip，ie4_9x.zip，ie501sp2_nt.zip，ie55sp2_9x.zip，ie6eolas_nt.zip）

以上談到了關於IE7.0的安裝與解決本機同時運行IE6和IE7的解決方案。下面我們談關於IE7.0RC的CSS相容解決方案：

相容在這裡主要以相容IE6.0及以上版本，相容Firefox1.5以上，這都是主流，至於其他瀏覽器有興趣的朋友我們可以在網下或QQ上交流。

要做到相容，主要有3種解決方案：1.條件注釋。2.JS。3。CSS hack。第1種需要在HTML裡才有效，還要對特定瀏覽器準備特定CSS，所以不好管理。第2種同樣需要準備兩套以上CSS。第3種雖然W3C不推薦不支援，但是現在被大多數開發人員所用。

現在IE6和IE7以及FF對盒模型解釋大致是一致的，都是盒實際寬度=盒內容寬度+內補丁值+邊框寬度。主要差異還是在一些細節上。比如IE6.0的margin雙倍問題，這樣的話在寫CSS或搭建XHTML結構時候盡量去寫相容性地，可擴充性的代碼和結構定義，避免BUG的出現，避免BUG條件的產生，預防隱患存在的不相容性。

最後，談到很重要的一點，CSS幾乎無所不能，CSS hack更是無所不能。恰當綜合使用CSS規則和CSS hack可以修正不同瀏覽器的顯示細節的錯位。例如我們對同樣一個盒定義他的內容寬度：

.div{width:150px!important;>width:200px!important;width:600px;}

這樣一句定義，這個盒的實際寬度在FF中是150px,而在IE7.0RC中是200px,在IE6.0中是600px.

為什麼呢？？

因為FF認識!important;並遵循其優先權，但是中間的值前面有個>，所以FF忽略它，這樣最後FF中就是150px;

而IE7.0RC也認識“!important;”，同時也認識“>”，所以將後面一個“!important;”將前面一個覆蓋掉，以最後一個為準。

而IE6.0不管“!important;”只認最後一個值。

知道了這，我想基本上這三個主要瀏覽器的相容基本上沒太大問題了。