列舉十個糟糕的IE Bug 及修復(fù)方法

國外有很多優(yōu)秀的文章可以用來學(xué)習(xí)，我決定花些時間翻譯。我并不知道這篇文章有沒有人翻譯過，原文名 10 Awful IE Bugs and Fixes，我希望能有更多人能看到這些優(yōu)秀的文章。外國人很幽默，所以我也就全文翻了。高手繞道

以下為譯文：

我列舉了10個常見的IE bug和解決方法。我相信這將能夠幫助你減少調(diào)試IE布局不一致時花掉的時間。

作者：kevin

簡介

在處理IE方面每個人都有他們自己的故事。作為一個開發(fā)者我不得不面對大量的IE的古里古怪的問題并且有的時候你只是想用頭撞墻。但是隨著時間的推移，我們慢慢吃一塹長一智（有些時候那不是我們的錯，是IE的錯！）并且開始接受和理解IE的怪異行為。我們不得不這樣因為仍然有數(shù)量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的瀏覽器測試你的網(wǎng)站。從一開始就解決布局問題要比在數(shù)千行html和css代碼之后容易的多。

有很多運動在抗議IE6，支持它的是大多數(shù)web專家和看起來不怎么關(guān)心的普通用戶。所以，我們現(xiàn)在能做什么？我們不得不繼續(xù)挖掘來解決IE6的問題。但是，等一下，有一個振奮人心的消息。基于w3cschool的月度報表，IE6的用戶這些年已經(jīng)減少了一些。從2006年6月的60.3%到現(xiàn)在2009年9月的13.6%。按照這種比例，我們應(yīng)該能在2010年年底的時候放棄IE6(譯注：國外的情況還真是一片大好啊~。~)

好了，回到現(xiàn)實，我已經(jīng)列出了全部我之前遇到的問題作為未來參考的列表。我相信這將能夠幫助你減少調(diào)試IE布局不一致時花掉的時間。

1、IE6 幽靈文本(Ghost Text bug)

在我寫本文之前，我遇到了這個bug。它相當(dāng)?shù)墓殴趾突Ｒ粔K不知哪來的重復(fù)的文本，被IE6顯示在靠近原文本的下面。(譯注：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它，所以我搜索它，果然，這是另一個IE6的bug。

對此有許多解決方法，但是沒有一個對我的例子有效(因為網(wǎng)站的復(fù)雜性我無法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起來能解決這個問題。

但是，從 Hippy Tech Blog 那里了解到，問題背后的原因是由于html注釋標(biāo)簽。IE6不能正確的渲染它。下面是他建議的解決方案列表：

解決方法：

1. 使用<!—[IF !IE]>標(biāo)簽包圍注釋
2. 移除注釋
3. 在前浮動上增加樣式 {display:inline;}
4. 在適當(dāng)?shù)母拥膁iv上使用負邊距
5. 在原文本增加額外的&nbsp;(比如10個空格) (hacky way)

2、相對位置和溢出隱藏(Position Relative and Overflow Hidden)

這個問題我遇到過很多次，當(dāng)時我正在準備一個JQuery的教程，因為我使用了很多overflow hidden來達到我想要的布局。
問題發(fā)生在當(dāng)父元素的overflow被設(shè)置成hidden并且子元素被設(shè)置成position:relative。
CSS-Trick有一個很好的例子來演示這個bug。position:relative and overflow in internet explorer

解決方法：

為父元素增加position:relative;

3、IE的最小高度(Min-Height for IE)

這很簡單，IE忽略min-height屬性。你可以用下面的hack來修復(fù)它。感謝Dustin Diaz。

這個解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。

解決方法：

selector { 
    min-height:500px; 
    height:auto !important; 
    height:500px; 
}

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈