相信從事前端開發的朋友對IE6都是深惡痛絕，恨不得先殺後J，然後再大卸八塊以解心頭隻恨。雖然是這麼可惡的一個浏覽器，但是IE6迄今為止的市 場占有率仍然很高，截止2009年8月份的市場占有率仍然有25%之多。那麼今天創意靈犀通過翻譯國外的譯文對IE6的相容問題進行總結概括。難免有疏漏 之處，如若您有更好的建議，歡迎在回複中提出，我會及時加以補充。
1.前言：
考慮浏覽器的相容性，我們要做的首先一定要簡潔，如果你的布局太複雜，相容性就更加難以做到。
其次，我們要實用合适的文檔聲明，因為沒有聲明的情況下，IE6會出現很多怪異的問題。W3CSCHOOL指出，XHTML1.0中文檔聲明包括以 下三種：Frameset(架構型)、Transitional(過渡型)、Strict(嚴格型) 。而loose為HTML4.01的類型，并非 XHTML的類型。我們最常用的通常是過渡型，示例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第三，當我們完成制作的時候要記得驗證我們的代碼，有些人認為校驗代碼沒有任何實用價值，但我不這麼認為。校驗僅僅隻需花費一點點時間，而且将受益于所有浏覽器而非僅僅IE6；驗證確定了向後相容并且易于維護。至少也得驗證XHTML！
第四，實用漸進增強，即在适當的時候保留一些不相容浏覽器的基本功能，至少不影響使用者體驗到網站要表現的内容。
最後是如何測試我們的網站，在FF下我們可以使用功能強大的Firebug，可以友善的對網站的CSS及網站結構進行精确快速的運作時檢視，甚至對JS設定斷點。而IE下我們的工具相對較為貧乏，但是我們可以使用IETester來測試不同IE版本的顯示效果，IETester的開發者也提供了DebugBar這款IE插件免費供個人使用，但商業使用者隻可試用60天。
2.對IE6單獨相容
相容IE6的第一步就是單獨對IE進行相容，你針對IE6所寫的代碼隻影響IE6；有幾種方法可以區分開IE6：IE特有條件注釋、CSS選擇器、JavaScript，網上這方面的資源非常豐富。具體的方法這裡不再贅述。
3.IE6裡的圖檔問題
3.1 PNG半透明圖檔
有很多JavaScript解決方案來修複IE6使用PNG-24圖檔，可以從網際網路上獲得相關資訊。另外一個辦法是使用IE特有的濾鏡
3.2 IE6下的CSS圓角。
具體實作方法，可以參看http://www.virtuosimedia.com/tutorials/css-rounded-corner-menus 不使用JS的方法，解決IE下圓角問題。
3.3 IE6下背景閃爍問題。
如果你給連結、按鈕用CSS sprites作為背景，你可能會發現在IE6下會有背景圖閃爍的現象。造成這個的原因是由于IE6沒有将背景圖緩存，每次觸發hover的時候都會重新加載，可以用JavaScript設定IE6緩存這些圖檔：
document.execCommand("BackgroundImageCache",false,true);
當然，這裡創意靈犀也給出一種自己的解決方法，就是使用背景的split。将兩個要切換的背景放在一張圖檔中，通過css的backgroun-position來實作同時加載。具體效果可以參看本站首頁http://elingxi.com中的24小時客服按鈕。
4.IE6裡的清單問題
4.1 橫向清單寬度bug
如果你使用float:left;[/i]把[i]<li>[/i]橫向擺列，并且[i]<li>[/i]内包含的[i]<a>[/i](或其他)觸發了hasLayout，在IE6下就會有錯誤的表現.
解決方法很簡單，隻需要給[i]<a>[/i]定義同樣的[i]float:left;即可。
4.2 清單階梯bug
清單階梯bug通常會在給<li>[/i]的子元素[i]<a>[/i]使用[i]float:left;時觸發，我們本意是要做一個橫向的清單(通常是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。
解決辦法就是給<li>[/i]定義[i]float:left;[/i]而非子元素[i]<a>[/i]，或者給[i]<li>[/i]定義[i]display:inline;也可以解決。
4.3 垂直清單間隙bug
當我們使用<li>包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條清單元素(<li>)之間添加空隙；解決這個問題的方法有很多.把<a>flaot并且清除float來解決這個問題。
5.IE6的千年老大難——IE6的布局問題
5.1 了解 hasLayout
許多IE6下的Bug及渲染問題都可以歸于微軟的私有概念hasLayout[/i]。簡要的說，在給元素定義具體的尺寸（如 [i]height[/i]或[i]width[/i]）就會觸發[i]hasLayout，在IE6下缺失或觸發hasLayout會導緻一些bug。
5.2 IE6 盒模型
如果怪異模式（quirks mode）在IE6中啟用，IE6将會使用微軟舊版的盒模型：width是元素的實際寬度，内容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的辦法是申明正确的文檔類型以避免觸發怪異模式，或者避免給有border[/i]或 [i]padding[/i]的元素定義[i]width屬性。當然你也可以考慮使用條件注釋。
5.3 最小高度
IE6 不支援min-height[/i]屬性，但它卻認為[i]height[/i]就是最小高度。解決的方法也很多，我們一般使用ie6不支援但其餘浏覽器 支援的屬性[i]!important。當然，我們還可以使用CSS 選擇器。需要注意的是，下面代碼中各個屬性的順序不能寫錯。
/* 所有浏覽器 */ #container {min-height:200px; height:auto !important; height:200px;}
5.4 最大高度
非常遺憾，在IE6下實作max-height隻能使用IE特有濾鏡，或者可以使用JavaScript實作。我個人更建議使用JavaScript來解決，因為IE濾鏡會消耗大量資源甚至會使浏覽器崩潰，而且禁用JavaScript後這兩種方法都無法生效。
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);
5.5 100% 高度
在IE6下，如果要給元素定義100%高度，必須要明确定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html[/i]和[i]body[/i]定義[i]height:100%;。
5.6 最小寬度
同max-height[/i]和[i]max-width[/i]一樣，IE6也不支援[i]min-width。有2個方法實作最小寬度，使用額外的标簽、使用JavaScript。
5.7 IE雙雙倍邊距的BUG
IE的雙倍邊距問題是我們最常見到的。在布局中當左右兩個塊級元素均為float時，兩個元素之間的外邊距(margin值)會被IE錯誤的計算為雙倍距離。解決方法很簡單，就是給元素添加display:inline，取消元素的塊級屬性。
5.8清除浮動
如果你想用div(或其他容器)包裹一個浮動的元素，你會發現必須給div(容器)定義明确的height[/i]、[i]width[/i]、[i]overflow之中一個屬性（除了auto值）才能将浮動元素嚴實地包裹。
5.9浮動層錯位
當内容超出外包容器定義的寬度時會導緻浮動層錯位問題。在Firefox、IE7及其他标準浏覽器裡，超出的内容僅僅隻是超出邊緣；但在IE6中容 器會忽視定義的width值，寬度會錯誤地随内容寬度增長而增長。如果在這個浮動元素之後還跟着一個浮動元素，那麼就會導緻錯位問題。
浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法，雖然可以使用overflow:hidden;[/i]或 [i]overflow:scroll;[/i]來修正，但[i]hidden[/i]容易導緻其他一些問題，[i]scroll會破壞設 計；JavaScript也沒法很好地解決這個問題。是以我的建議是一定要避免這個問題發生，使用一個固定的布局或者控制好内容的寬度。
5.10 躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之後有不浮動的内容，并且有一些定義了:hover的 連結，當滑鼠移到那些連結上時，在IE6下就會觸發躲貓貓。解決的方法很簡單在(那個未浮動的)内容之後添加一個<span style="clear:both;"></span>
5.11 3像素間距bug
在IE6中，當文本(或無浮動元素)跟在一個浮動的元素之後，文本和這個浮動元素之間會多出3像素的間隔。解決的方法就是給浮動層添加 display:inline 和 -3px 負值margin。
5.12 IE下z-index的bug
在IE浏覽器中，定位元素的z-index[/i]層級是相對于各自的父級容器，是以會導緻[i]z-index[/i]出現錯誤的表現。解決方法是給其父級元素定義[i]z-index[/i]，有些情況下還需要定義[i]position:relative。
![用spoon.net網站作網站相容性測試，真心推薦喲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)