10要點解決IE6兼容性問題

吼吼，最近在學兼容問題，以爲學得很差，就百度了一些資料。

一、使用聲明 你必須常常在html網頁頭部放置一個聲明，推薦使用嚴格的標準。例如

1. <!DOCTYPEHTMLPUBLIC「-//W3C//DTDHTML4.01//EN」  
2.  
3. "http://www.w3.org/TR/html4/strict.dtd」> 
4. or,forXHTML:  
5. <!DOCTYPEhtmlPUBLIC「-//W3C//DTDXHTML1.0Strict//EN」  
6.  
7. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」> 

最後你須要是IE6進入兼容模式，這已經足夠兼容了。

二、使用position:relative IE6兼容性問題解決方案二：使用position:relative。設置一個標籤position:relative能夠解決不少問題，特別是曾經有過看不見的經歷或者奇怪佈局的框架。明顯的，你須要當心，絕對位置放置的子元素是否都參照找到新位置。

三、爲浮動元素使用display:inline 浮動元素會有一個著名的IE6雙邊距marginbug。假如你設置了左邊距5px但實際上獲得了10px左邊距。display:inline能夠解決這個問題，儘管它不是必需的，可是css仍然有效。

四、設置元素啓動hasLayout 大部分IE6（IE7）的渲染問題均可以經過起來元素的hasLayout屬性來兼容。這是IE內置的設定，肯定一個內容塊相對其它內容塊是有界限和位置的。當你須要設置一個行內元素例如一個鏈接變成塊狀元素或者是透明效果，設置hasLayout也是必須的。

五、修復重複字符的bug 複雜的佈局會觸發一個bug：浮動對象的最後字符會出如今已經清除浮動的元素後面。這裏有幾種解決的辦法，部分是理想的，而且一些測試和出錯是必須的。 a、確保浮動元素都使用：display:inline； b、最後一個浮動元素使用margin-right:-3px; c、在浮動對象最後一個元素後使用一個條件註釋。例如<!—>這裏輸入註釋…<![endif] d、在容器內的最後使用一個div空標籤（它也必須設置90%寬度甚至更小）

六、使用a標籤完成可點擊和hover原理 IE6只支持a標籤的css定義hover效果 你可使用它去控制javascript啓動的widgets，使得他們仍然保持鍵盤操做。這裏有個二擇一的問題，可是a標籤是全部解決方案中最可靠的。

七、使用!important，或是高級選擇符替代IE特定代碼 IE6兼容性問題解決方案七;：使用!important。在外置的css文件裏，放棄憑藉傳統的hacks和條件判斷，使用有效的css代碼去針對IE6仍然是有可能的。例如：最小高度可使用一下定義。

1. #element{  
2. min-height:20em;  
3. height:auto!important;  
4. height:20em;  
5. } 

九、早點和常常測試 在你的網站和應用程序完成以前，不要放棄IE6的測試。問題將會更加嚴重而且須要很長時間去修復。若是你的網站能夠運行於firefox和IE6，它將差很少確定能夠在其它瀏覽器下運行。

十、重構你的代碼 IE6兼容性問題解決方案十：重構代碼。常常的，修復會比從新考慮佈局問題更加花費時間。Html細微的修改和更加簡單的css常常是最有效的。這意味着你要放棄完美的合法的代碼，可是將會更少的問題出現，而且你知道怎樣處理將要出現的狀況。