Firefox份額跌至20%之內 IE份額上升

根據Net Marketshare的統計，Firefox瀏覽器市場份額跌倒20%之內，市場格局基本無變動，但IE增勢明顯。

 2012年10月，IE加入了0.5個百分點從53.63%增至54.13%，Firefox略跌0.09%從20.08%落至 19.99%；Chrome繼續下滑0.31%，從18.86%降至18.55%；Safari減少0.05%至5.21%；Opera為1.63%，比 上個月加入0.01%。






據瀏覽器版本統計， 剛剛隨Windows 8正式推出的IE10份額微不足道，只有占0.13%，預計下個月才能明顯趨勢；IE8依然最流行占24.50%，IE9 20.11%，二者呈上升態勢，IE6從7.22%降至6.85%，Chrome 22占15.02%，Firefox 15占7.82%。根據桌面作業系統版本統計，Windows 8 占0.41%，Windows 7和XP分別為44.69%和40.66%。

IE10 要來囉！！

IE10 要來囉！！ Win7可用，比IE9效能更佳，支援更多
目前是預覽版本，預計10月底正式上市

下載：（下載IE9也好啊，換掉IE6、7、8吧）
http://ie.microsoft.com/testdrive/Info/Downloads/Default.html

Windows Internet Explorer 10(簡稱IE10)，為微軟的最新瀏覽器，而只能直行在Windows 7以上的作業系統上，IE10與IE9功能其實都差不多。而在IE10也在IE9的基礎上增強了許多功能(例如：硬體加速、CSS3解析、HTML5.. 等)。

以下幾項為IE10的新功能：
(我想這些新功能對一般的使用者，使用IE10可能還感覺不太出太大的差異)

◎ Cross-Origin Resource Sharing (CORS) for XMLHttpRequest
◎ CSS -ms-user-select property
◎ CSS3 font-feature-settings屬性可訪問OpenType
◎ Document setting to enable floating point values in CSS-OM
◎ HTML5 BlobBuilder API and new APIs以保存或打開文件
◎ HTML5 track element for HTML5 video captions
◎ Interoperable HTML5 Quirks mode
◎ JavaScript Typed Arrays
◎ Meta tag提醒用戶該網站需要ActiveX擴展（桌面版IE10）
◎ 從IE10標準模式中刪除了古舊的圖片功能
◎ 支持最新的HTML5 WebSocket API
◎ Web Worker thread pooling

相關連結：
http://7club.ithome.com.tw/article/10036651/1
http://ie.microsoft.com/testdrive/

Internet Explorer 9 候選版 (Release Candidate , IE9 RC) 出爐！

擁有極簡設計、硬體加速與安全性防護的 Internet Explorer 9 於上週發佈候選版，此版本為即將正式上市前的最終公開下載版本，喜歡嚐鮮的使用者可以搶先窺視全新的 Internet Explorer 9 擁有的功能，Internet Explorer 9 除了擁有全新設計的極簡外觀，並強調網頁開啟速度超人一等外，透過硬體加速，讓網頁中的多媒體能更真實的呈現，同時擁抱 HTML5 標準，讓所瀏覽的網站才是主角，釋放網路原力之美。台灣微軟邀請您搶先試用！

了解更多：http://windows.microsoft.com/zh-TW/internet-explorer/downloads/ie

全面加速 網站速度加快，反應更快速。

網站超吸晴 瀏覽器新風貌，網站超吸晴。

與 Windows 7 完美整合 打造絕佳的網路體驗 - 透過Windows.

任意框 移至網址或開始搜尋，一次到位的整合服務。

已釘選的網站 按一下就可以移至您最愛的網站。

SmartScreen 篩選工具 內建保護功能讓您線上瀏覽更安心。

Google說Microsoft的IE9讚！這是在演哪一齣啊～

期待IE9：標準化核心與完整使用者體驗

微軟最新一代瀏覽器IE 9 Beta版發佈會將於美國時間9月15日上午10點在美國舊金山舉行。據悉，全球共有150名媒體人士會參與此次發佈會。對於微軟而言，為一款測試版產品舉辦如此龐大的發佈活動尚屬首次，可以看出微軟對IE9的重視和對Beta版完善程度的信心。

在今年上半年，微軟已經發佈了多個版本的IE9工程預覽版，最新的版本號為PP4。這些面向程序開發者和合作夥伴的IE預覽版沒有提供完整的使用者界面，需要使用者像打開文件一樣手工置入網址。預覽版可以讓我們提前領略IE9在瀏覽器內核上的大幅升級。

據微軟透露，截止目前，IE9 PP版下載量達275萬，預覽版網站test Drive訪問量超過2500萬，已經獲取試用使用者反饋2000多份。

IE9的內核升級主要體現在4個方面。標準互通：IE9對HTML5和CSS3的支援更為完善，對音視訊影片的支援達到更高層次。速度更快：IE9支援圖形硬體級的加速，可以直接調用GPU強大的處理能力，因此在渲染複雜的頁面時，速度要遠遠超過上一代瀏覽器。優化體驗：基於對使用者的瞭解，IE9實現了更多人性化的設計，並能帶來迅捷、精確的響應。值得信賴：IE9在兼容性和安全性上延續了IE8的特性，對於網銀等關鍵應用提供足夠的保障。這些特色使用者已經可以從前期的預覽版以及微軟線上的大量測試中體驗到。

微軟最新的瀏覽器IE9為其贏得了不少以前似乎不可能得到的讚賞。例如，谷歌的瀏覽器產品經理布萊恩·拉克絲基(Brian Rakowski)就對微軟在網路瀏覽器的進展表示出讚賞。「我們非常歡迎微軟的創新，並對IE9能夠支援更多標準十分興奮。

他承認微軟IE9在一些領域已經領先於谷歌，但承諾谷歌將在一兩個月內將類似的功能添加到Chrome瀏覽器中。

瀏覽器市場競爭激烈

目前，來自谷歌Chrome和Firefox的競爭推動瀏覽器市場出現了技術賽跑的局面，這與當年微軟和Netscape的"瀏覽器大戰"有幾分相像。

據Net Applications的統計顯示，谷歌Chrome全球瀏覽器市場份額從零一路上升至7.5%，而微軟則從超過90%下降到了60%。微軟試圖在最新的瀏覽器中讓網頁表現得更像程序，同時為使用者帶來更快的響應時間和更好的網頁展示和互動方式。

微軟面臨著來自蘋果的競爭。蘋果憑借其iPhone、iPod touch和iPad，蘋果使用者能夠通過連接因特網的移動應用使用網路服務。


這樣，使用者更容易獲得網路服務，尤其是在較小的移動設備屏幕上。如此一來，蘋果有可能會促使使用者減少對網路瀏覽器的依賴。

IE9 "模糊"網站和應用界限

微軟瀏覽器開發部門副總裁迪恩·哈查莫維奇(Dean Hachamovitch)表示，"IE9的設計和技術模糊了網站和應用之間的界限。"

微軟聲稱，IE9是第一款直接利用計算機圖形處理器的瀏覽器。通過與CPU協同工作，"硬體加速"將使得網頁能夠更像一個運行在機器上的程序。哈查莫維奇表示，"如此一來，網頁就可以獲得本地程序中的一些長處。"

哈查莫維奇認為，通過直接使用圖形處理器，網頁中的圖像效果將得到大幅提升，網頁能夠每秒鐘展示更多影格的畫面。

微軟另外一個獲得谷歌讚賞的方面就是，其在IE9加入了眾多對先進的網路標準的支援。在過去，微軟曾因為行動緩慢無法跟上並支援最新的網路標準而遭到谷歌和網路行業的批評。

微軟網路應用動力不足

然而，一家名為Directions on Microsoft的獨立研究機構分析師馬特·羅索夫(Matt Rosoff)表示，微軟在網路應用開發方面動力不足，因為微軟對直接運行在PC上的傳統程序仍然十分依賴。

他認為，儘管如此，微軟仍需要應對來自谷歌的挑戰，以吸引Chrome使用者回歸IE。這在谷歌即將推出Chrome操作系統直接與Windows競爭的背景之下顯得尤為重要。

當然，IE9 Beta的特色肯定不止這些，除了最新瀏覽器核心的升級，相信它還將帶來更多的驚喜。具備了完整使用者操作界面的IE9 Beta會成為一個融合平台，整合微軟現有的各種Web服務，給使用者以完整的應用體驗。

下面是純粹的預測：

首先，IE8已經通過加速器等方式與微軟Bing搜尋等服務進行了順暢的融合，我們有望在IE9上看到更緊密的關聯，微軟以及其他合作夥伴的服務會更緊密地和瀏覽器，以及使用者的瀏覽過程關聯起來。其次，IE9中也會具備一些目前其他瀏覽器中頗受歡迎的特色，例如可能會允許使用者將網址的快捷方式轉換為應用等等，更符合使用者的瀏覽習慣。

從理論上來說，IE9 Beta版還是面向開發者和合作夥伴發佈的。因此，搜狐IT此行關注的還有與會的大量微軟合作夥伴，其中也包括搜狐自己的體育頻道內容團隊和設計團隊。他們作為新技術的首批應用者，將為我們展示IE9帶來的全新網路體驗。

9月15日微軟發佈會的名為"get ready for a more beautiful web"（準備好一個更美好的網路）。"更美好"意味的不僅僅是更精美的音視訊影片渲染、更流暢的使用者界面，也會包括更完整人性的網路服務和更安全可靠的應用體驗。

雖然要到正式版IE9發佈時，才會跟Windows 7等商業軟體有捆綁等正式推廣舉措，但IE9 Beta的亮相已經有望改變目前IE瀏覽器市場份額下滑的局面，並成為微軟網路戰略中不可或缺的一環。而Beta版發佈後更大規模的試用，也會為微軟提供更多的使用者回饋，讓2011年正式亮相的IE9更具競爭力。

比較 Internet Explorer 9 與 IE其他版本或其他瀏覽器

http://windows.microsoft.com/zh-TW/internet-explorer/products/ie-9/compare

ie9下載,ie9.0繁體中文版下載,ie9 download

Adobe Flash下載頁面，也有IE9專用版本的版本，也有64位元版本，使用Windows 7的使用者有福了！

IE9 Beta發佈網站：http://www.microsoft.com/presspass/presskits/internetexplorer/
各國語言版本下載：http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide
IE9特效展示網頁：http://www.beautyoftheweb.com/

微軟聯合Gorillaz虛擬樂隊為IE9 Beta宣傳造勢

9月15日微軟將舉辦IE9 Beta的發佈會「美麗的網路」，這個消息相信大家都不陌生了，但是為了讓更多的人關注此事，微軟發起了一輪大規模的廣告攻勢。
在國外知名IT網站TechCrunch上，微軟已經提供了多幅網頁廣告，其標語多為媒體和微軟合作夥伴對IE9的評價，比如「IE9將徹底改變網路」（IE9  will change the web forever）、「準備好迎接一個更美麗的網路」（get ready for a more beautiful web）等。

除了TechCrunch之外，其它多個知名網站上也出現了IE9宣傳廣告。有意思的是，迄今出現的IE9營銷材料的風格的色調都與之前的Visual Studio 2010和Zune極為相似。
微軟即將聯合虛擬樂隊Gorillaz在英國舉辦一場虛擬Internet Explorer 9 beta發佈會
目前相關的邀請已經送達到各大媒體，Gorillaz是支虛擬卡通動畫Hip-Hop/Punk搖滾樂團，Gorillaz的4個虛構成員包括：聰明樂觀的酷哥團長兼吉他手Murdoc，身材修長頹廢迷人的帥哥主唱2D，嘻哈黑人大老粗鼓手Russel，以及聰慧可愛的貝司手Noodle 。

TheKillers樂團：IE以前真的很麻煩

搖滾樂團The Killers，是參與15日IE9 beta發表會的微軟夥伴之一，該團的新版HTML5官網，完全發揮了IE9的特色。

但Killers並非IE的死忠支持者。為該團設計新官網的Sparkart公司執行長Naveen
Jain表示，過去他有一大部分時間，是花在測試和修改網站，以配合IE。

他說：「身為網頁開發者，一直以來，我的團隊與微軟的關係不算最好。從QA（品質擔保）的觀點來看，我們過去必須作各種調整，去支援IE6。」The
Killers樂團經理Robert Reynolds說：「但你還是必須去配合，因為他們的市佔率高。」

Jain過去要花40的時間，確保網站在所有主要瀏覽器都能完整呈現，現在只需5到10的時間。Reynolds說，以往樂團總是在設計一個Flash網站，或內容陽春但適用所有瀏覽器的網站之間掙扎。

但HTML5和IE9讓他們不需再被迫妥協。兩人表示，新官網讓樂團與樂迷有更好的聯繫，那正是成立官網的初衷。

此外，Jain表示，程式製作只花了他兩週半，因此他有更多時間與樂團成員溝通，專注在網站內容創意面。

Jain表示，新官網也適用Chrome和Safari，但效果不是很好。他說：「（網頁）的反應不是很快。在IE9的表現好很多。」用HTML5代表這個網站應該也能以iPhone或iPad進入。但Jain表示，行動版還要再等1個月。

Jain表示，Arcade Fire與Google合作發表其 HTML5影片，引起該團的密切注意。但The
Killers官網更具突破性。他說：「他們是第一個發表（HTML5）影片的樂團，我們是第一個完整的（HTML5）藝人網站。」

釋放網路原力之美,IE9下載
http://www.microsoft.com/taiwan/promo/ie9/
有繁體中文的版本，而且包含
Windows 7 32位元 及 64位元 的 IE9繁體中文版本 下載
ie9下載,ie9.0繁體中文版下載,ie9 download

http://windows.microsoft.com/zh-TW/internet-explorer/download/ie-9/worldwide

IE9 beta即將出現，提供完整硬體加速

IE9

微軟本周就將發佈IE9測試版本，造勢自然少不了。微軟網頁圖形項目經理Ted Johnson上週末就在MSDN博客上發文稱，IE9是業內唯一一款可完整支援網頁硬體加速的瀏覽器。
文中表示，微軟很高興看到其他瀏覽器開始逐步使用硬體加速功能，不過「部分加速」和「完整加速」還是有本質上的區別。
今年3月推出的IE9 Platform Preview預覽版就預設開啟了「GPU-powered HTML5」功能，對網頁上的所有內容：文字、圖片、背景、邊框、SVG內容、HTML5音視訊影片等進行DirectX GPU硬體加速。
微軟表示，網頁渲染共分為三個階段，而IE9在所有階段中都可實現硬體加速。首先是內容渲染階段，IE9會使用Direct2D和DirectWrite系統進行各部分內容的硬體渲染加速。
頁面生成階段，IE9會基於Direct3D加速頁面繪製。而在最終的桌面生成階段，Windows 7/Vista的Desktop Windows Manager（DWM）會基於DirectX GPU加速進行最終畫面的繪製。

根據IE9團隊的說法，能夠提供完整的網頁硬體加速支援，實際上還是IE瀏覽器僅支援Windows平台的「好處」。
為了實現跨平台，許多瀏覽器在開發中都不得不做出很多妥協，性能難以同「原生"瀏覽器抗衡。
整的GPU加速支援就是如此，要編寫跨平台的中間層和庫文件對於開發者的挑戰性實在太高，而原生操作系統支援就簡單的多了。Windows操作系統DirectX多年來在3D遊戲產業中積累的經驗，加速了GPU加速網頁渲染技術的研發。
IE9將利用Sandy Bridge實現圖形內容渲染
微軟和英特爾正在緊密合作，以實現在IE9中的網頁瀏覽硬體加速，IE9將支援Core i系列芯片加速，包括最新的Sandy Bridge。
新版瀏覽器將傳統的硬體加速再度細分到CPU和GPU，由於GPU具有相當多的處理核心，這種新的技術可以讓每個核心都能分配到一小部分任務，因而能實現更加迅速和有效的圖形運算，包括文字、圖像、背景、邊框、SVG內容和HTML5均可以利用硬體加速來展現。
微軟在一台上網本上展示了IE9運行HTML5視訊影片和720p高解析視訊影片編碼的範例，對比測試中，其它瀏覽器幾乎佔用了所有CPU運算，而IE9卻表現良好，不過也有人對此表示質疑，包括Mozilla Firefox在內的一系列新版本瀏覽器都已經開始實現各種級別的硬體加速。

IE9

IE9 Beta發佈網站：http://www.microsoft.com/presspass/presskits/internetexplorer/

各國語言版本下載：http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

IE9特效展示網頁：http://www.beautyoftheweb.com/

 

IE9 Beta將採用新邊框,解決『2像素邊框偏差』問題

IE9 Beta將採用新邊框

據國外媒體報道，微軟IE9 Beta將不再採用傳統的2像素寬邊框，。早在Platform Preview 4版發佈時，微軟公司便表明了這個意向：「IE瀏覽器有一個經典的『2像素邊框偏差』問題，該問題主要是由於瀏覽器顯示區域的剛好2像素寬的『內陷』邊 框，頁面的頂部和左側都會出現這個問題。在Platform Preview 4版中，用戶會注意到IE9標準模式已經解決了邊框問題。」


微軟的這一舉措不只是解決了『2像素邊框偏差』問題，這更是表明IE瀏覽器正在快速邁向IE9時代。

微軟此舉表明，IE9已經可以支持現代Web標準，而且微軟正在兌現當初的承諾。

專為IE9開發的網站內容將無縫支持其他競爭瀏覽器，例如Chrome和Firefox。當然，開發者甚至還可以使用CSS3、HTML5這類標準開發網站。

微軟的IE程序經理John Hrvatin透露：「按照舊式文檔模式運行的頁面仍然會出現2像素邊框，因此任何通過IE8等瀏覽器開發的網站仍然會出現這個問題。」

過去，Web開發者需要區別對待自己的網站，特別針對IE瀏覽器構建不同的內容。隨著IE9的發佈，開發者將不再有這樣的擔憂，微軟已經統一了IE9, Chrome和Firefox等瀏覽器。

延伸閱讀：

關於IE9的幾條最新傳言
最新IE9界面截圖洩露？
新一輪瀏覽器大戰即將上演

微軟 9/15日推出 IE 9 Beta版

微軟IE 9 跟Chrome、Firefox、Safari 做正面對決

IE 9 beta版必須Windows Vista或Windows 7以上才能使用，不支援XP系統，安裝時得移除舊版 IE 才行。

IE 9的重點功能包括支援 HTML 5、改良過的JavaScript 引擎，同時還可透過電腦的繪圖晶片來加速文字與圖像呈現。

IE9 Beta究竟會帶來什麼樣的驚喜這裡我們暫且不進行探究，此次來說一說IE9的新Logo。

在之前發布的IE9平台預覽版的測試官網Test Drive頁面上，IE9的Logo與IE8相同，只是將文字說明部分的8替換成了9。 大家知道，IE8的Logo與IE7相同，沒有進行調整，如今IE9被微軟寄予厚望，是重拾昔日榮耀的一個籌碼，那麼再使用與IE8相同的Logo就說不過去了。

微軟預計在9/15日推出IE 9瀏覽器。

微軟是在部落格宣布此一消息，確定beta版即將上市，微軟稱當天的上市活動（與其瀏覽器）是為了突顯出「beauty of the Web」。微軟還發送了一整包包含美術用品的資料袋給記者，內有蠟筆與手指畫顏料。

微軟為了瀏覽器上市而大費周章舉行大型記者會顯示出瀏覽器再次受到重視的程度，同時也看得出微軟希望仰賴 IE 9 能跟Chrome、Firefox、Safari 做正面對決。

IE 9 beta版必須在Windows Vista或Windows 7環境才能使用，XP不支援，同時也得移除舊版 IE 才行。IE 9的重點功能包括支援 HTML 5、改良過的JavaScript 引擎，同時還可透過電腦的繪圖晶片來加速文字與圖像呈現。

微軟還沒有多談 IE 9的設計，公司主管 Ryan Gavin僅表示這版瀏覽器的目標是不要檔到用戶的視覺。

「瀏覽器是劇院，要演出的不是我們。」他說。

Gavin 表示微軟希望beta版而廣為被使用，「顯然這次的beta版不是人人都能用，但若你可以下載安裝，我很希望你能試試看 IE 9。」

若你無法，或不想安裝beta版，微軟還持續提供/更新先前釋出的技術預覽版。

IE9 Beta發佈網站：http://www.microsoft.com/presspass/presskits/internetexplorer/

各國語言版本下載：http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

IE9特效展示網頁：http://www.beautyoftheweb.com/

IE9 preview 4的Acid3測試高達95分!!

根據最新訊息，微軟宣佈IE9 beta版將於9月15日發佈，並於昨日發佈了最後一個IE9技術預覽版。從IE9公佈到現在，IE9的開發人員已經修復了100多個錯誤。這個IE9瀏覽器版本的改進讓我們非常吃驚，它的JavaScript和圖形性能遠遠領先於之前的版本，JavaScript性能已經跟Chrome、Opera等瀏覽器基本處在同一等級，並且支援更多的HTML5規範。特別值得注意的是，IE9的Acid3測試得分高達95分，幾乎快要接近100分的滿分。
不過，IE9的Acid3測試可能將最終止步於95分，因為失去的那5分涉及到兩個功能：SMIL展示和SVG字體。根據微軟Web產品經理馬克夸克表示，他們正在實現Web開放字體格式(WOFF) ，所以認為有沒有必要做SVG字體，而在CSS 3中也已經包含有SMIL類似的功能。
有趣的是，有專家認為這兩項功能可能將從SVG標準中去除，那麼SVG字體或許以後將不會影響到Acid3測試的成績。
儘管IE9測試得了新高，微軟依然能看清測試的關鍵，並表示，任何一個最佳化中的測試都會導致得到非正常的結果，微軟鼓勵開發人員來測試功能，而不是瀏覽器的版本，以便使用者獲得最佳的效果。
雖然這是測試版發佈前的最後一個預覽版，IE9的使用者界面仍舊是個迷。微軟的意圖是想讓測試版在9月份發佈的時候足夠好，被廣泛的使用者接受。「使得任何使用者都可以輕鬆的安裝和移除IE9瀏覽器"，Quirk表示。有關尚未宣佈的IE9正式版發佈日期，Quirk說「將在測試版發佈後不久"。 一個合理的猜想應該是在2011年初。
Internet Explorer 9, Platform Preview 4

有繁體中文的版本，而且包含 Windows 7 32位元 及 64位元 的 IE9繁體中文版本 下載
ie9下載,ie9.0繁體中文版下載,ie9 download

http://windows.microsoft.com/zh-TW/internet-explorer/download/ie-9/worldwide

IE9 Beta發佈網站：http://www.microsoft.com/presspass/presskits/internetexplorer/

各國語言版本下載：http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

IE9特效展示網頁：http://www.beautyoftheweb.com/

 

IE8安全性趕超新版Firefox和Chrome

NSS Labs針對各大瀏覽器對社會工程惡意軟體的防禦水平進行了測試，結果表明，IE8的確在眾多競爭對手中脫穎而出。一直以來，微軟都以Windows 7和IE8中所包含的預設組件功能為傲，稱它們能夠為使用者帶來意想不到的卓越體驗。Avast公司的首席技術官Ondrej Vlcek表示，目前，IE8的安全性水平已經能夠與其競爭對手Firefox和Chrome並駕齊驅。

與此同時，Vlcek還淡化了Chrome瀏覽器中的「沙箱"技術與改進使用者安全之間的相關聯性。

Vlcek指出，在IE8與最新版Firefox和Chrome的安全性比較中，我們並未發現IE8與具備「沙箱"標籤技術功能的 Firefox和Chrome之間存在明顯的差異。因此，我並不認為Chrome的「沙箱"技術是專門設計用於反惡意軟體措施的，只不過是加強了獨立標籤的穩定性，也就是說一個標籤的崩潰不會影響到其他標籤，但是對於防禦惡意軟體並沒有實質性的效果。

2010年4月份，安全研究人員Marc Maiffret曾對微軟的安全研發週期提出了讚許，並表示微軟軟體的安全性水平要遠遠高於蘋果的軟體。而近日，另一位安全專家Paula Januszkiewicz也對IE8的安全性表示了讚許。

Vlcek表示，目前，市場中有多個主流瀏覽器，它們自身的安全性得到了大幅的提升，但是這卻並不能存證瀏覽器組件（如PDF閱讀器）的安全性。

[轉載][譯]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>
  <!--[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>
  

  使用條件註釋加載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)
  &&
  ($.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提供了詳細的解決方法。
  
  
  不管為何會觸發這個問題，解決方法很簡單：
  

1. 在(那個未浮動的)內容之後添加一個<span style="clear:both;"></span>
   
2. 
   
   觸發包含了這些鏈接的容器的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>
  

  目錄 | 頂部
  
  
  

  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
  
  

  <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>
  <!-- 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像素大小顯示在你的收藏夾裡，有兩種方法來顯示收藏夾圖標：
  

1. 把一張圖片命名為favicon.ico並放置在網站的根目錄，IE及其他瀏覽區都會
   自動設置該文件為收藏夾圖標；
   
2. 
   
   在<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