去年就想將IE的bug系統地整理下，但一直都忙於工作、學習沒有完成，看到這篇E文後，我毫不猶豫的放下了手中的工作將之翻譯出來。
由於是第一次譯文，所以錯誤在所難免，歡迎大家批評指正。
原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻譯：http://www.vfresh.org/w3c/727(譯文對原文進行了補充)
對IE6最好的策略就是不去兼容它。
好吧，我知道你的難處，你不得不去兼容IE6這個狗血的瀏覽器，因此不得不在兼容IE6上花費很多時間。對此，我頗有同感，來讓我來幫助你吧。
我不會像許多文章那樣讓你去抵制IE6，這並不會幫助到你(迫不得已時)去兼容IE6；因為IE6依舊佔有一定的市場份額，你無法放棄IE6。
本文將幫助你來解決這個難題。
我查閱過很多資料來摘錄這些解決方案（有些是我自己提供的），現在我做成手冊提供給大家搞定IE6這個傢伙。我儘可能的提供了最優解決方案而不是一些hacks，並且提供了一些相關的資料。如果你發現有更好的方法或者本文有錯誤，請聯繫我。
【目錄】
【策略】
。
- IE6 市場佔有率
- 做一個簡潔的設計
- 使用合適的文檔申明 (doctype)
- 驗證你的代碼
- 先對標準瀏覽器進
行兼容
- 漸進增強 (Progressive Enhancement)
- 使用自己的預設樣式（CSS Reset）
- 使用JavaScript框架
- 使用JavaScript模擬
標準瀏覽器
【對IE6單獨兼容】
兼容IE6的第一步就是單獨對IE進行兼容，你針對IE6所寫的代碼隻影響IE6。
- 使用IE特有條
件註釋
- 使用CSS選擇器區分開IE6
【圖片】
- PNG半透
明圖片
- IE6下的圓角
【佈局】
解決IE6佈局方面的BUG非常的惱人！特別是在實現一個精美的設計稿時。
- 理解 hasLayout
- IE6 盒模型
- 最小高度
- 最大高度
- 100% 高度
- 最小寬度
- 最大寬度
- 雙邊距Bug
- 清除浮動
- 浮動層錯位
- 躲貓貓bug（The Guillotine Bug）
- 絕對定位元素的1像素間距bug
- 3像素間距bug
- IE下z-index的bug
【列表】
- 橫向列表寬度bug
- 列表階梯bug
【行為】
ie6有著一些行為方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微軟固執的使用了其私有方法。
- IE6中的:hover
- 在IE瀏覽其中使用Canvas標籤
【JavaScript】
IE6有著數不盡的JavaScript bug，這裡我不會講解每一個IE6下JavaScript的bug，只摘取其中幾個普遍的問題來討論。
- 異常： Expected Identifier, String, Or Number
【其他】
- 文本重
複Bug
- 收藏夾圖標
【相關資源】
【策略】
在討論IE6的BUG及如何修復之前，有必要講敘一些策略去避免這些惱人的問題——正所謂防患於未然
。
目錄 | 頂部
IE6 市場佔有率
據Market Share統計，目前（2009年8月）IE6 的市場佔有率為25.25%，但是其他地方的統計明顯要低，為18.1%；儘管統計結果不同，但都呈現出了下降的趨勢（翻譯此文時，淘寶的IE6用戶
已從70%跌破至69%）。但是最重要的，還是你自己網站的統計數據。如果你對你的網站進行了流量分析，那麼IE6的佔有率是否值得你去針對 IE6進行開發？這需要你自己去權衡。
如果你網站絕大部分訪問者不使用IE6並且不付費給你，那麼你不必特意區針對IE6做兼容，從而節省時間、精力及資金。
目錄 | 頂部
做一個簡潔的設計
在做設計的同時考慮代碼的實現，可以避免一些佈局上的問題。再複雜的設計稿也能用簡潔的代碼實現，如果你使用了過於繁冗的標籤，那麼你需要重新修繕
設計稿。
如果你有豐富的開發經歷，攻克過很多種佈局難題，記錄下你的解決方案，在以後碰到相同問題時可以提高開發效率。
目錄 | 頂部
使用合適的文檔申明(doctype)
使用一個錯誤的文檔聲明會觸發quirks mode(怪異模式)，正確的文檔聲明可以保證你的頁面在所有瀏覽器下保持一致的效果。使用其中的一個文檔申明：HTML 5, HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
HTML 5
html
<!DOCTYPE HTML>HTML 4.01 Strict
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Frameset
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">HTML 4.01 Transitional
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 Strict
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Frameset
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.0 Transitional
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.1
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
目錄 | 頂部
驗證你的代碼
我曾聽說過有些人認為校驗代碼沒有任何實用價值，但我不這麼認為。校驗僅僅只需花費一點點時間，而且將受益於所有瀏
覽器而非僅僅IE6；驗證確保了向後兼容並且易於維護。至少也得驗證XHTML！唯一可以忽略驗證的情況是在你打算使用CSS3時。
你可以使用w3提供的工具驗證XHTML/驗
證CSS
目錄 | 頂部
先對標準瀏覽器進行兼容
在寫代碼的過程中，一開始在標準瀏覽器中測試（如 Firefox, Opera, Chrome等），然後再去測試非標準瀏覽器（如IE6/IE7），因為這些標準瀏覽器都遵循w3c標準，大多的處理方式都相同。你可以分開來單獨去兼容
「特別」的IE瀏覽器，這樣做能規範你的代碼，你將會因此擁有紮實的基礎；而且如果你不再需要兼容這些非標準瀏覽器，你可以一次性刪除這些修復兼容性代
碼。
目錄 | 頂部
漸進增強(Progressive Enhancement)
漸進增強(Progressive Enhancement)是為了確保沒有頁面特效後基本功能也是可用的。簡單來講，漸進
增強是指在確保頁面在禁用JavaScript後能正常運作後，再對頁面添加各種特效（JavaScript動畫、Ajax異步等等）。我們同樣可以運用
「漸進增強」原則來使用CSS3（或者一些CSS2）、HTML5以及其他IE6所不支持的web規範。
某些情況下，是無法讓所有用戶在任何瀏覽器下都完全一模一樣，特別是那些使用IE6的用戶。運用漸進增強策略，可以保證讓那些用戶至少使用到你網站
（或網絡應用）的基本功能。
更多漸進增強的資料：
- 理解漸進增強（譯文）
- Understanding Progressive Enhancement
- Progressive Enhancement With CSS
- Progressive Enhancement: What It Is, And How To Use It?
- Graceful Degradation vs. Progressive Enhancement
目錄 | 頂部
使用自己的預設樣式（CSS Reset）
每個瀏覽器都有各自不同的預設樣式，在你的樣式表之前使用預設樣式（CSS Reset）可以避免在之後編寫冗長的瀏覽器兼容樣式。在網上有很多CSS Reset可供參考。
簡單CSS Reset示例：
css
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}一些可供參考的CSS Resets：
- YUI CSS Reset
- Eric Meyer』s Reset Reloaded
目錄 | 頂部
使用JavaScript框架
如果你的網站使用了較多的JavaScript特效，建議使用JavaScript框架。大部分的js框架都兼容了包括IE6在內的各種瀏覽器。可
選的框架有很多，但一般能用一種框架實現的效果一定可以用另外一種框架實現，所以你可以根據個人喜好來選擇合適的框架。
以下是一些常用的JavaScript框架：
- MooTools
- jQuery
- ProtoType with Scriptaculous
- Dojo
強烈推薦實用MooTools，但如果你是入門者，還是建議使用jQuery。
目錄 | 頂部
使用JavaScript模擬標準瀏覽器
現在有一些JavaScript來使IE模擬標準瀏覽器，如果你有較高比例的用戶使用IE6並且開啟了JavaScript，可以考慮使用Dean Edwards的IE7或者類似的腳本。
譯者註：不建議使用這些腳本，因為這些「模擬」的實現往往會消耗大量的資源，IE本來就夠爛了。
目錄 | 頂部
如何在IE下調試頁面
在IE下調試頁面很麻煩，Firefox下的擴展程序Firebug和Web Developer Toolbar都是很好用的工具，如果你想在IE或其他瀏覽器上使用firebug，可以用Firebug Lite。
在IE下有兩種最好的調試方法：IE Collection和IETester，
並且都是免費的（雖然有一點點缺陷）。IETester的開發者也提供了DebugBar這款IE插件免費供個人使用，但商業用戶只可試用60天。
目錄 | 頂部
【對IE6單獨兼容】
兼容IE6的第一步就是單獨對IE進行兼容，你針對IE6所寫的代碼隻影響IE6；有幾種方法可以區分開IE6：IE特有條件註釋、CSS選擇器、 JavaScript，我們將逐一討論。
目錄 | 頂部
使用IE特有條件註釋
微軟給IE添加了條件註釋以區分不同版本，任何東西都可以塞進條件註釋裡：標籤、JavaScript、js文件、css、內聯樣式。可以使用條件
註釋來針對某一個IE瀏覽器版本來編寫代碼。
規則如下：（譯註：可參考IE 特有註釋(hack)）
html
使用條件註釋加載css的好處是這些樣式是獨立於其他css文件的，因此不會在編寫兼容代碼時弄得一團糟；而且當IE6的市場份額降低到不需要兼容<p>這段文字會在所有瀏覽器顯示</p> <!--[if lte IE 6]> <p>這段文字僅顯示在 IE6及IE6以下版本。</p> <p>This message will only appear in versions of Internet Explorer less than or equal to version 6.</p> <![endif]--> <!--[if gte IE 6]> <p>這段文字僅顯示在 IE6及IE6以上版本。</p> <p>This message will only appear in versions of Internet Explorer greater than or equal to version 6.</p> <![endif]--> <!--[if gt IE 6]> <p>這段文字僅顯示在 IE6以上版本（不包含IE6）。</p> <p>This message will only appear in versions of Internet Explorer greater than version 6.</p> <![endif]--> <!--[if IE 5.5]> <p>這段文字僅顯示在 IE5.5。</p> <p>This message will only appear in Internet Explorer 5.5.</p> <![endif]--> <!--在 IE6及IE6以下版本中加載css--> <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" /> <![endif]--> <p>這段文字會在所有瀏覽器顯示</p>
時，可以快速的清理掉。
使用條件註釋的唯一缺點是在IE瀏覽器下會增加額外的HTTP請求數，所以需要權衡是否這樣做。但我不建議使用條件註釋加載外部js文件，因為js 文件會造成阻滯，在js未加載完之前其餘文件都不會被加載；對於js請使用JavaScript程序來區分瀏覽器而非條件註釋。
目錄 | 頂部
使用CSS選擇器區分開IE6
如果你不打算使用條件註釋，CSS選擇器是另外一個區分開IE6的辦法，IE6不支持子選擇器；先針對IE6使用常規申明CSS選擇器，然後再用子
選擇器針對IE7+及其他瀏覽器。
示例：
html
這個方法的缺點是容易把樣式表弄得一團糟，所以一定要寫好註釋說明。<style type="text/css" > /* IE6 專用 */ .content {color:red;} /* 其他瀏覽器 */ div>p .content {color:blue;} </style> <div> <p class="header">Some Header Text Here</p> </div>
在示例中，針對IE6寫的樣式在其他瀏覽器中也會執行，但(標準瀏覽器中)之後的子選擇器覆蓋了之前的申明，而IE6不支持子選擇器所以忽略了它。
擴展閱讀：
- CSS Browser Compatibility Chart
目錄 | 頂部
使用JavaScript區分開IE6
如果你想要使用JavaScript區分開IE6，請看示例：
javascript
//原生JavaScript if(typeof document.body.style.maxHeight === "undefined") { alert('IE6 Detected'); } //MooTools（框架） if (Browser.Engine.trident4) { alert('IE6 Detected'); } //jQuery（框架） if (($.browser.msie) && ($.browser.version == "6.0")){ alert('IE6 Detected'); }擴展閱讀：
- Quirksmode』 s Browser Object
- MooTools』 Browser Object
目錄 | 頂部
【圖片】
目錄 | 頂部
PNG半透明圖片
有很多JavaScript解決方案來修復IE6使用PNG-24圖片，但除了Twin Helix』s IE5.5+ PNG Alpha Fix都不支持CSS sprites。
另外一個辦法是使用IE特有的濾鏡，可閱讀Aaron Baxter的博客。或譯者的《ie5+ PNG Fix》
JavaScript方式修復IE6 PNG
- MooTools』 FixPNG
- jQuery PNG fix
- IE PNG Fix by Twin Helix
- TweakPNG
目錄 | 頂部
IE6下的圓角
可以詳細閱讀CSS 圓角菜單。
目錄 | 頂部
背景閃爍問題
如果你給鏈接、按鈕用CSS sprites作為背景，你可能會發現在IE6下會有背景圖閃爍的現象。造成這個的原因是由於IE6沒有將背景圖緩存，每次觸發hover的時候都會重新
加載，可以用JavaScript設置IE6緩存這些圖片：
javascript
document.execCommand("BackgroundImageCache",false,true);其他解決方法：
目錄 | 頂部
【佈局】
解決IE6佈局方面的BUG非常的惱人！特別是在實現一個精美的設計稿時。
目錄 | 頂部
理解 hasLayout
許多IE6下的Bug及渲染問題都可以歸於微軟的私有概念hasLayout。簡要的
說，在給元素定義具體的尺寸（如height或width）
就會觸發hasLayout，在IE6下缺失或觸發hasLayout會導致一些bug。
擴展閱讀：
- 《On having layout》(譯文)
- 「HasLayout」 Overview from Microsoft
IE6 盒模型
如果怪
異模式（quirks mode）在IE6中啟用，IE6將會使用微軟舊版的盒模型：width是元素的實際寬度，內容寬度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)。最好的辦法是申明正確的文檔類型以避免觸發怪
異模式，或者避免給有border或padding的
元素定義width屬性。當然你也可以考慮使用條件註釋。
擴展閱讀：
- IE CSS Tricks That Will Get You Every Time
- Internet Explorer And The CSS Box Model
目錄 | 頂部
最小高度
IE6 不支持min-height屬性，但它卻認為height就是最小高度。感謝Dustin Diaz提供了一個很好的方法：使用!important，ie6會忽視它但其餘瀏
覽器不會。
註：IE6在同一個聲明語句中(即一個綜括號{})的屬性定義，後面的總
是會覆蓋前面的，所以下例中後面的height覆蓋掉了前面定義的important height
css
另一個方法是使用CSS 選擇器：/* 所有瀏覽器 */ #container {min-height:200px; height:auto !important; height:200px;}
css
/* 僅IE6 */ #container {min-height:200px; height:200px;} /* 其他瀏覽器 */ html>body #container { height:auto;}
目錄 | 頂部
最大高度
非常遺憾，在IE6下實現max-height只能使用IE特有濾鏡，或者可以使用 JavaScript實現。我個人更建議使用JavaScript來解決，因為IE濾鏡會消耗大量資源甚至會使瀏覽器崩潰，而且禁用JavaScript 後這兩種方法都無法生效。
JavaScript
javascript
//直接使用ID來改變元素的最大高度 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);
目錄 | 頂部
100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義height:100%;。
css
/* 給child元素定義100%高度（IE6）*/ #parent {height:500px;} #child {height:100%;} /* 定義滿屏高度（IE6）*/ html, body {height:100%;} #fullLength {height:100%;}
目錄 | 頂部
最小寬度
同max-height和max-width一
樣，IE6也不支持min-width。有2個方法實現最小寬度，使用額外的標籤、使用JavaScript。
javascript
目錄 | 頂部//直接使用ID來改變元素的最小寬度 var container = document.getElementById('container'); container.style.width = (container.clientWidth < width) ? "500px" : "auto"; //寫成函數來運行 function setMinWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth < width) ? width + "px" : "auto"; } //函數示例 setMinWidth('container1', 200); setMinWidth('container2', 500);
最大寬度
只能使用JavaScript。
javascript
//直接使用ID來改變元素的最大寬度 var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; //寫成函數來運行 function setMaxWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; } //函數示例 setMaxWidth('container1', 200); setMaxWidth('container2', 500);
目錄 | 頂部
雙邊距Bug
當元素浮動時，IE6會錯誤的把浮動方向的margin值雙倍計算。Steve Clason給出了解決方法：給元素添加display:inline;
css
/*IE6下將產生雙倍邊距*/ .floatedEl {float:left; margin-left:100px;} /*修正*/ .floatedEl {float:left; margin-left:100px; display:inline;}
目錄 | 頂部
清除浮動
如果你想用div(或其他容器)包裹一個浮動的元素，你會發現必須給div(容器)定義明確的height、width、overflow之中一個屬性
（除了auto值）才能將浮動元素嚴實地包裹。
示例：
html
css<div id="container"> <div id="floated1"></div> <div id="floated2"></div> </div>
譯者常用的方式：#container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;}
css
#container {zoom:1;} /* ie瀏覽器 */ #container:after{content:"\0020";display:block;height:0;clear:both;} /*標準瀏覽器*/擴展閱讀：
- 《清
理浮動的全家》
- Clearing Floats
目錄 | 頂部
浮動層錯位
當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在Firefox、IE7及其他標準瀏覽器裡，超出的內容僅僅只是超出邊緣；但在IE6中容
器會忽視定義的width值，寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之後還跟
著一個浮動元素，那麼就會導致錯位問題。
浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法，雖然可以使用overflow:hidden;或overflow:scroll;來修正，但hidden容
易導致其他一些問題，scroll會破壞設計；JavaScript也沒法很好地解決這個問
題。所以我的建議是一定要避免這個問題發生，使用一個固定的佈局或者控制好內容的寬度。
擴展閱讀
- Float Drop – floated elements drop below their expected position
目錄 | 頂部
躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之後有不浮動的內容，並且有一些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。
點
此查看bug示例頁
頭大了吧！但別擔心，well-documented提供了詳細的解決方法。
不管為何會觸發這個問題，解決方法很簡單：
- 在(那個未浮動的)內容之後添加一個<span style="clear:both;"></span>
觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
擴展閱讀：
目錄 | 頂部
絕對定位元素的1像素間距bug
IE6下的這個錯誤是由於進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或寬為奇數時，bottom和right會產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方
法。Paul O』Brien有關這個 bug有一篇文章來講解。
擴展閱讀：
目錄 | 頂部
3像素間距bug
在IE6中，當文本(或無浮動元素)跟在一個浮動的元素之後，文本和這個浮動元素之間會多出3像素的間隔，Stu Nichols有一個非常好的解決方法。
譯註：可運行下面代碼來查看作者提供的修複方法
html
目錄 | 頂部<style type="text/css"> .container {width:750px; height:237px; margin:50px auto; background:url(http://www.cssplay.co.uk/ie/3pxbug/bug.jpg) no-repeat center top;} .container #page1,.container #page2 {width:30%; margin:0 auto 0 auto; padding-top:80px;} .container .topMid {overflow:hidden; height:15px; background: url(http://www.cssplay.co.uk/ie/3pxbug/topmid.png);} .container .topLeft {overflow:hidden; width:20px; height:15px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/topleft.png);} .container .topRight {overflow:hidden; width:25px; height:15px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/topright.png);} .container .content {height:100px; margin-right:25px; background:#ccc;} .container .content h2 {font-size:20px; height:80px; line-height:70px; text-align:center; margin:0;} .container .midLeft {width:20px; height:100px; float:left; background: url(http://www.cssplay.co.uk/ie/3pxbug/midleft.png);} .container .midRight {width:25px; height:100px; float:right; background: url(http://www.cssplay.co.uk/ie/3pxbug/midright.png);} .container .bottomMid {overflow:hidden; height:20px; background: url(http://www.cssplay.co.uk/ie/3pxbug/bottommid.png);} .container .bottomLeft {overflow:hidden; width:20px; height:20px; float:left; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomleft.png);} .container .bottomRight {overflow:hidden; width:25px; height:20px; float:right; background:url(http://www.cssplay.co.uk/ie/3pxbug/bottomright.png);} /* 給浮動層添加 display:inline 和 -3px 負值margin */ .container #page2 .topLeft, .container #page2 .midLeft, .container #page2 .bottomLeft {display:inline;margin-right:-3px;} .container #page2 .topRight, .container #page2 .midRight, .container #page2 .bottomRight {display:inline;margin-left:-3px;} /* 給中間的內容層定義 margin-right 以糾正-3px */ * html #page2 .content {margin-right:22px;} </style> <div class="container"> <div id="page1"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>【3px Bug】</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div> <div class="container"> <div id="page2"> <div class="topLeft"></div> <div class="topRight"></div> <div class="topMid"></div> <div class="midLeft"></div> <div class="midRight"></div> <div class="content"> <h2>【3px Bug 已修正！】</h2> </div> <div class="bottomLeft"></div> <div class="bottomRight"></div> <div class="bottomMid"></div> </div> </div>
IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，所以會導致z-index出現錯誤的
表現。解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative
擴展閱讀：
- z-index在IE中的迷惑
- 無法衝破的等級
目錄 | 頂部
Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素，如下例：
html
解決方法就是給外包容器.wrap加上position:relative;。<style type="text/css" > .wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;} .child {position:relative;width:50px;height:200px;background:#99CC00;} </style> <div class="wrap"> <div class="child"> </div> </div>
目錄 | 頂部
【列表問題】
最為特別的IE許多bug都會影響到列表，這裡例舉了一些示例。
目錄 | 頂部
橫向列表寬度bug
如果你使用float:left;把<li>橫
向擺列，並且<li>內包含的<a>(或
其他)觸發了hasLayout，在IE6下就會有錯誤的表現：
html
解決方法很簡單，只需要給<a>定義同樣的float:left;即可。<style type="text/css" > #menu li { float:left; list-style:none; background:#CCCCFF; } #menu li a { padding:0 10px; display:block; height:20px; /* 觸發了hasLayout */ } </style> <ul id="menu"> <li><a href="#" title="">Menu Item #1</a></li> <li><a href="#" title="">Menu Item #2</a></li> <li><a href="#" title="">Menu Item #3</a></li> </ul>
目錄 | 頂部
列表階梯bug
bug示例：
html
<style type="text/css" > ul { clear: both; list-style: none; } a { display: block; float: left; background: #99CCFF; } #two a { font-size: 1.1em; } </style> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> <ul id="two"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul>
列表階梯 bug通常會在給<li>的子元素<a>使用float:left;時
觸發，我們本意是要做一個橫向的列表(通常是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。
解決辦法就是給<li>定義float:left;而
非子元素<a>，或者給<li>定
義display:inline;也可以解決。
目錄 | 頂部
垂直列表間隙bug
當我們使用<li>包含一個塊級子元素時，IE6(IE7也有可能)會錯誤
地給每條列表元素(<li>)之間添加空隙；解決這個問題的方法有很多，看示例：
BUG代碼：
html
<style type="text/css" > ul {margin:0; padding:0; list-style:none;} li a {display:block; background:#ddd;} </style> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul>解決方法：
Jon Hicks把<a>flaot並
且清除float來解決這個問題：
css
另外一個辦法就是觸發<a>的hasLayout（如ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}
定義高寬、使用zoom:1;）
css
也可以給<li>定義display:inline;來ul {margin:0; padding:0; list-style:none;} li a {display:block; padding:0.5em; background:#ddd; zoom:1;} /* height:1%; 也有同樣的作用 */
解決此問題。
另外還有一個極有趣的方法，給<a>包含的文本末尾添加一個空格：
html
<ul> <li><a href="#">Item 1 </a></li> <li><a href="#">Item 2 </a></li> <li><a href="#">Item 3 </a></li> </ul>擴展閱讀：
- Fixing the IE6 Whitespace Bug
目錄 | 頂部
【行為】
ie6有著一些行為方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微軟固執的使用了其私有方法。
目錄 | 頂部
IE6中的:hover
在IE6中，除了<a>(需要有href屬
性)才能觸發:hover行為，這妨礙了我們實現許多鼠標觸碰效果，但還是有一些法子是可以解
決它的。
最好是不要用:hover來實現重要的功能，僅僅只用它來強化效果。
許多修復IE6 hover的方法都是使用微軟提供的私有方法behavior或
者JavaScript，通常使用JavaScript 框架或者IE6修復類js。
目錄 | 頂部
在IE瀏覽其中使用Canvas標籤
canvas是 HTML5新引入的元素，提供了通過 JavaScript 繪製圖形的方法，此方法使用簡單但功能強大。
所有IE瀏覽器都不支持HTML5中的canvas標籤，而是使用它微軟私有的VML，但是可以通過JavaScript來使canvas在IE下
生效。
修復canvas的一些JavaScript：
- ExplorerCanvas (also called excanvas)
- ExplorerCanvas Google Group
MooCanvas at Github, a MooTools implementation of excanvas目錄 | 頂部
IE6調整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body裡面的相對定位元素都會固定不動了。Emil Stenström發現了IE6 Resize Bug並提供瞭解決辦法：給body定義position:relative;就行了，夠簡單吧！~
目錄 | 頂部
【JavaScript】
IE6有著數不盡的JavaScript bug，這裡我不會講解每一個IE6下JavaScript的bug，只摘取其中幾個普遍的問題來討論。
目錄 | 頂部
Error: Expected Identifier, String, Or Number
IE瀏覽器不容許不良的JavaScript書寫，如果在數組或者Hash對象的末尾有逗號就會引發異常「Expected Identifier, String, Or Number」，其他瀏覽器允許這樣做，但在書寫時注意刪除末尾的逗號以避免這個錯誤。
目錄 | 頂部
IE中JavaScript內存洩露
由於IE瀏覽器使用其自己的內存管理，當JavaScript使用的內存沒有被回收時就會引發內存洩露。可閱讀《JScript的內
存洩漏》及《Finally, the alternative fix for IE6』s memory leak is available》
目錄 | 頂部
【其他】
IE6中一些其他bug
目錄 | 頂部
文本重複Bug
在IE6中，一些隱藏的元素（如註釋、display:none;的元素）被包含在一個
浮動元素裡，就有可能引發文本重複bug：
html
<style type="text/css" > .demobox { width: 250px; border: 3px solid #4c6f42; } .firstfloat { float: left; background: #939a90; } .secondfloat { float: left; width: 250px; margin-bottom: 2px; background: #fbdabb; } </style> <!-- Begin live demo --> <div class="demobox"> <div class="firstfloat">第一個浮動層</div> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <div class="secondfloat"> 第二個浮動層<br /> <span style="background: #f2ab82;">aa這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。</span> </div> <div style="clear: both; background: #b2d4af;">清除浮動層</div> </div> <!-- end live demo -->
Position Is Everything詳細講解了這個問題，但解決辦法很簡單：給浮動元素添加display:inline;。
css
目錄 | 頂部.firstfloat {display:inline;}
IE的收藏夾圖標(Favicons)
收藏夾圖標會以16×16像素大小顯示在你的收藏夾裡，有兩種方法來顯示收藏夾圖標：
- 把一張圖片命名為favicon.ico並放置在網站的根目錄，IE及其他瀏覽區都會
自動設置該文件為收藏夾圖標；
在<head>區域聲明：需要注意的是收藏夾圖標會被一直緩存，除非你清除瀏覽器的緩存，才會更新新的圖標；如果你想要瀏覽者自動更新收藏夾圖標，請給 favicon.ico設置expires。
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
擴展閱讀：
目錄 | 頂部
IE6的GZip
服務器端使用GZip壓縮了的文件，在某些版本的IE6（特別是未更新XP sp2的）中會有一些問題。所幸的是Seb Duggan找到了IE6 GZip bug解決方法，在Apache中使用ISAPI_Rewrite。
Seb提供的方法是在 ISAPI_Rewrite 安裝目錄下的httpd.conf中
加入以下代碼：
html
RewriteEngine on RewriteCond %{HTTP:User-Agent} MSIE [56] RewriteCond %{HTTP:User-Agent} !SV1 RewriteCond %{REQUEST_URI} .(css|js)$ RewriteHeader Accept-Encoding: .* $1
