E6終極備忘：修複IE6下_25+_Bugs

引言：“珍惜生命，遠離IE 6

！”

E6終極備忘：修複IE6下_25+_Bugs

對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

〖相關資源〗

〖政策〗原文位址：http://user.qzone.qq.com/756948

在讨論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 "-//W 3C//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)

是為了確定沒有頁面特效後基本功能也是可用的。簡單來講，漸進增強是指在確定頁面在禁用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>

<!--[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]-->

<!--[if lte IE 6]>

<![endif]-->

<p>這段文字會在所有浏覽器顯示</p>

使用條件注釋加載css的好處是這些樣式是獨立于其他css檔案的，是以不會在編寫相容代碼時弄得一團糟；而且當IE6的市場佔有率降低到不需要相容時，可以快速的清理掉。

使用條件注釋的唯一缺點是在IE浏覽器下會增加額外的HTTP請求數，是以需要權衡是否這樣做。但我不建議使用條件注釋加載外部js檔案，因為js檔案會造成阻滞，在js未加載完之前其餘檔案都不會被加載；對于js請使用JavaScript程式來區分浏覽器而非條件注釋。

使用CSS選擇器區分開IE6

如果你不打算使用條件注釋，CSS選擇器是另外一個區分開IE6的辦法，IE6不支援子選擇器；先針對IE6使用正常申明CSS選擇器，然後再用子選擇器針對IE7+及其他浏覽器。

示例：

html運作

.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) && ($.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

#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.getElementByIdx_x('container');

container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//寫成函數來運作

function setMaxHeight(elementId, height){

var container = document.getElementByIdx_x(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

#parent {height:500px;}

#child {height:100%;}

html, body {height:100%;}

#fullLength {height:100%;}

最小寬度

同max-height和max-width一樣，IE6也不支援min-width。有2個方法實作最小寬度，使用額外的标簽、使用JavaScript。

javascript

//直接使用ID來改變元素的最小寬度

var container = document.getElementByIdx_x('container');

container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//寫成函數來運作

function setMinWidth(elementId, width){

var container = document.getElementByIdx_x(elementId);

container.style.width = (container.clientWidth < width) ? width + "px" : "auto";

}

//函數示例

setMinWidth('container1', 200);

setMinWidth('container2', 500);

最大寬度

隻能使用JavaScript。

javascript

//直接使用ID來改變元素的最大寬度

var container = document.getElementByIdx_x(elementId);

container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//寫成函數來運作

function setMaxWidth(elementId, width){

var container = document.getElementByIdx_x(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

.floatedEl {float:left; margin-left:100px;}

.floatedEl {float:left; margin-left:100px; display:inline;}

清除浮動

如果你想用div(或其他容器)包裹一個浮動的元素，你會發現必須給div(容器)定義明确的height、width、overflow之中一個屬性（除了auto值）才能将浮動元素嚴實地包裹。

示例：

html運作

</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;}

#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運作

.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);}

.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;}

* html #page2 .content {margin-right:22px;}

</style>

</div>

</div>

</div>

</div>

IE下z-index的bug

在IE浏覽器中，定位元素的z-index層級是相對于各自的父級容器，是以會導緻z-index出現錯誤的表現。解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative

擴充閱讀：

z-index在IE中的迷惑

無法沖破的等級

Squish The Internet Explorer z-index Bug

Overflow Bug

在IE6/7中，overflow無法正确的隐藏有相對定位position:relative;的子元素，如下例：

html運作

.wrap {overflow:hidden;width:100px;height:100px;background:#336600;border:solid #666600 5px;}

.child {position:relative;width:50px;height:200px;background:#99CC00;}

</style>

</div>

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

〖清單問題〗

最為特别的IE許多bug都會影響到清單，這裡例舉了一些示例。

橫向清單寬度bug

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

html運作

#menu li {

float:left;

list-style:none;

background:#CCCCFF;

}

#menu li a {

padding:0 10px;

display:block;

height:20px;

}

</style>

</ul>

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

目錄 | 頂部

清單階梯bug

bug示例：

html運作

ul {

clear: both;

list-style: none;

}

a {

display: block;

float: left;

background: #99CCFF;

}

#two a {

font-size: 1.1em;

}

</style>

<ul>

</ul>

</ul>

清單階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發，我們本意是要做一個橫向的清單(通常是導航欄)，但IE卻可能呈現出垂直的或者階梯狀。

解決辦法就是給<li>定義float:left;而非子元素<a>，或者給<li>定義display:inline;也可以解決。

垂直清單間隙bug

當我們使用<li>包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條清單元素(<li>)之間添加空隙；解決這個問題的方法有很多，看示例：

BUG代碼：

html運作

ul {margin:0; padding:0; list-style:none;}

li a {display:block; background:#ddd;}

</style>

<ul>

</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;}

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

另外還有一個極有趣的方法，給<a>包含的文本末尾添加一個空格：

html運作

<ul>

</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運作

.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="firstfloat">第一個浮動層</div>

第二個浮動層<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>區域聲明：

需要注意的是收藏夾圖示會被一直緩存，除非你清除浏覽器的緩存，才會更新新的圖示；如果你想要浏覽者自動更新收藏夾圖示，請給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

原文位址：http://user.qzone.qq.com/202524

E6終極備忘：修複IE6下_25+_Bugs

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條