神魂顛倒 Web 前端: [轉載][譯]IE6終極備忘：修復IE6下 25+ Bugs

去年就想將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的BUG及如何修復之前，有必要先講一些策略去避免這些惱人的問題——正所謂防患於未然
。

IE6 市場佔有率
做一個簡潔的設計
使用合適的文檔申明 (doctype)
驗證你的代碼
先對標準瀏覽器進
行兼容
漸進增強 (Progressive Enhancement)
使用自己的預設樣式（CSS Reset）
使用JavaScript框架
使用JavaScript模擬
標準瀏覽器
如何在IE下調試頁面



【對IE6單獨兼容】

兼容IE6的第一步就是單獨對IE進行兼容，你針對IE6所寫的代碼隻影響IE6。
使用IE特有條
件註釋
使用CSS選擇器區分開IE6
使用 JavaScript區分開IE6

【圖片】
PNG半透
明圖片
IE6下的圓角
背景閃爍問題



【佈局】

解決IE6佈局方面的BUG非常的惱人！特別是在實現一個精美的設計稿時。
理解 hasLayout
IE6 盒模型
最小高度
最大高度
100% 高度
最小寬度
最大寬度
雙邊距Bug
清除浮動
浮動層錯位
躲貓貓bug（The Guillotine Bug）
絕對定位元素的1像素間距bug
3像素間距bug
IE下z-index的bug
Overflow Bug

【列表】
橫向列表寬度bug
列表階梯bug
列表間隙bug

【行為】

ie6有著一些行為方面的BUG，究其原因是IE6版本太老了，不能完好地支持CSS2更不支持CSS3，而且微軟固執的使用了其私有方法。
IE6中的:hover
在IE瀏覽其中使用Canvas標籤
IE6調整窗口大小的 Bug

【JavaScript】

IE6有著數不盡的JavaScript bug，這裡我不會講解每一個IE6下JavaScript的bug，只摘取其中幾個普遍的問題來討論。
異常： Expected Identifier, String, Or Number
IE 中JavaScript內存洩露



【其他】
文本重
複Bug
收藏夾圖標
IE6中GZip文件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
Pragmatic Progressive Enhancement – Why You Should Bother With It

目錄 | 頂部
使用自己的預設樣式（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
KISSY CSS Reset

目錄 | 頂部



使用JavaScript框架

如果你的網站使用了較多的JavaScript特效，建議使用JavaScript框架。大部分的js框架都兼容了包括IE6在內的各種瀏覽器。可
選的框架有很多，但一般能用一種框架實現的效果一定可以用另外一種框架實現，所以你可以根據個人喜好來選擇合適的框架。

以下是一些常用的JavaScript框架：

MooTools
jQuery
ProtoType with Scriptaculous
Dojo
Ext JS

強烈推薦實用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
```
<p>這段文字會在所有瀏覽器顯示</p>

 

 

 

 


 
<p>這段文字會在所有瀏覽器顯示</p>
```
使用條件註釋加載css的好處是這些樣式是獨立於其他css文件的，因此不會在編寫兼容代碼時弄得一團糟；而且當IE6的市場份額降低到不需要兼容
時，可以快速的清理掉。

使用條件註釋的唯一缺點是在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

Master 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)
&amp;&amp;
($.browser.version
==
"6.0")){
    alert('IE6 Detected');
}

擴展閱讀：

Quirksmode』 s Browser Object
MooTools』 Browser Object
jQuery』s support utility

目錄 | 頂部



【圖片】

目錄 | 頂部



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
DD_belatedPNG

目錄 | 頂部

IE6下的圓角

可以詳細閱讀CSS 圓角菜單。

目錄 | 頂部
背景閃爍問題

如果你給鏈接、按鈕用CSS sprites作為背景，你可能會發現在IE6下會有背景圖閃爍的現象。造成這個的原因是由於IE6沒有將背景圖緩存，每次觸發hover的時候都會重新
加載，可以用JavaScript設置IE6緩存這些圖片：

javascript
```
    document.execCommand("BackgroundImageCache",false,true);
```
其他解決方法：

Minimize Flickering CSS Background Images in IE6

目錄 | 頂部



【佈局】

解決IE6佈局方面的BUG非常的惱人！特別是在實現一個精美的設計稿時。

目錄 | 頂部



理解 hasLayout

許多IE6下的Bug及渲染問題都可以歸於微軟的私有概念hasLayout。簡要的
說，在給元素定義具體的尺寸（如height或width）
就會觸發hasLayout，在IE6下缺失或觸發hasLayout會導致一些bug。

擴展閱讀：

《On having layout》(譯文)
「HasLayout」 Overview from Microsoft
hasLayout CSS Bugs

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

Internet Explorer Box Model Bug

目錄 | 頂部

最小高度

IE6 不支持min-height屬性，但它卻認為height就是最小高度。感謝 Dustin Diaz提供了一個很好的方法：使用!important，ie6會忽視它但其餘瀏
覽器不會。

註：IE6在同一個聲明語句中(即一個綜括號{})的屬性定義，後面的總
是會覆蓋前面的，所以下例中後面的height覆蓋掉了前面定義的important height

css

/* 所有瀏覽器 */
#container
{min-height:200px;
height:auto !important;
height:200px;}

另一個方法是使用CSS 選擇器：

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

<div
id="container">
<div
id="floated1"></div>
<div
id="floated2"></div>
</div>

css

#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
Simple Clearing of Floats

目錄 | 頂部



浮動層錯位

當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在Firefox、IE7及其他標準瀏覽器裡，超出的內容僅僅只是超出邊緣；但在IE6中容
器會忽視定義的width值，寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之後還跟
著一個浮動元素，那麼就會導致錯位問題。

浮動層錯位問題在IE6下沒有真正讓人滿意的解決方法，雖然可以使用overflow:hidden;或overflow:scroll;來修正，但hidden容
易導致其他一些問題，scroll會破壞設計；JavaScript也沒法很好地解決這個問
題。所以我的建議是一定要避免這個問題發生，使用一個固定的佈局或者控制好內容的寬度。

擴展閱讀

Float Drop – floated elements drop below their expected position
Internet Explorer 6 and the Expanding Box Problem

目錄 | 頂部



躲貓貓bug

在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之後有不浮動的內容，並且有一些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。

點
此查看bug示例頁

頭大了吧！但別擔心，well-documented提供了詳細的解決方法。

不管為何會觸發這個問題，解決方法很簡單：

在(那個未浮動的)內容之後添加一個<span style="clear:both;"></span>
觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

擴展閱讀：

IE hasLayout and the return of the Guillotine bug

目錄 | 頂部



絕對定位元素的1像素間距bug

IE6下的這個錯誤是由於進位處理誤差造成（IE7已修復），當絕對定位元素的父元素高或寬為奇數時，bottom和right會產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對於液態佈局沒有完美的解決方
法。Paul O』Brien有關這個 bug有一篇文章來講解。

擴展閱讀：

IE6 絕對定位元素的 1px 間距 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>

目錄 | 頂部

<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>

解決方法就是給外包容器.wrap加上position:relative;。

目錄 | 頂部

【列表問題】

最為特別的IE許多bug都會影響到列表，這裡例舉了一些示例。

目錄 | 頂部

橫向列表寬度bug

如果你使用float:left;把<li>橫
向擺列，並且<li>內包含的<a>(或
其他)觸發了hasLayout，在IE6下就會有錯誤的表現：

html

<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>

解決方法很簡單，只需要給<a>定義同樣的float:left;即可。

目錄 | 頂部

列表階梯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

ul
{margin:0;
padding:0;
list-style:none;}
li
a
{display:block;
padding:0.5em;
background:#ddd;
float:left;
clear:left;}

另外一個辦法就是觸發<a>的hasLayout（如
定義高寬、使用zoom:1;）

css

ul
{margin:0;
padding:0;
list-style:none;}
li
a
{display:block;
padding:0.5em;
background:#ddd; zoom:1;}
/* height:1%; 也有同樣的作用 */

也可以給<li>定義display:inline;來
解決此問題。

另外還有一個極有趣的方法，給<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
Closing the gap between list items in IE

目錄 | 頂部



【行為】

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>

<div
class="demobox">
    <div
class="firstfloat">第一個浮動層</div>
    




    <div
class="secondfloat">
        第二個浮動層<br
/>
        <span
style="background: #f2ab82;">aa這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。這段文字會被重複。。。</span>
    </div>
    <div
style="clear: both; background: #b2d4af;">清除浮動層</div>
</div>

```
Position Is Everything詳細講解了這個問題，但解決辦法很簡單：給浮動元素添加display:inline;。

css
```
.firstfloat
{display:inline;}
```
目錄 | 頂部

IE的收藏夾圖標(Favicons)

收藏夾圖標會以16×16像素大小顯示在你的收藏夾裡，有兩種方法來顯示收藏夾圖標：

把一張圖片命名為favicon.ico並放置在網站的根目錄，IE及其他瀏覽區都會
自動設置該文件為收藏夾圖標；
在<head>區域聲明：
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

需要注意的是收藏夾圖標會被一直緩存，除非你清除瀏覽器的緩存，才會更新新的圖標；如果你想要瀏覽者自動更新收藏夾圖標，請給 favicon.ico設置expires。

擴展閱讀：

How to Add a Shortcut Icon to a Web Page

目錄 | 頂部

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
```

[轉載][譯]IE6終極備忘：修復IE6下 25+ Bugs

【策略】

【對IE6單獨兼容】

【圖片】

【佈局】

【列表】

【行為】

【JavaScript】

【其他】

【相關資源】

【策略】

IE6 市場佔有率

做一個簡潔的設計

使用合適的文檔申明(doctype)

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

XHTML 1.1

驗證你的代碼

先對標準瀏覽器進行兼容

漸進增強(Progressive Enhancement)

更多漸進增強的資料：

使用自己的預設樣式（CSS Reset）

簡單CSS Reset示例：

一些可供參考的CSS Resets：

使用JavaScript框架

使用JavaScript模擬標準瀏覽器

如何在IE下調試頁面

【對IE6單獨兼容】

使用IE特有條件註釋

使用CSS選擇器區分開IE6

擴展閱讀：

使用JavaScript區分開IE6

擴展閱讀：

【圖片】

PNG半透明圖片

JavaScript方式修復IE6 PNG

IE6下的圓角

背景閃爍問題

其他解決方法：

【佈局】

理解 hasLayout

擴展閱讀：

IE6 盒模型

擴展閱讀：

最小高度

最大高度

JavaScript

100% 高度

最小寬度

最大寬度

雙邊距Bug

清除浮動

示例：

擴展閱讀：

浮動層錯位

擴展閱讀

躲貓貓bug

擴展閱讀：

絕對定位元素的1像素間距bug

擴展閱讀：

3像素間距bug

IE下z-index的bug

擴展閱讀：

Overflow Bug

【列表問題】

橫向列表寬度bug

列表階梯bug

垂直列表間隙bug

BUG代碼：

解決方法：

擴展閱讀：

【行為】

IE6中的:hover

在IE瀏覽其中使用Canvas標籤

修復canvas的一些JavaScript：