怪怪國日報: 01/23/11

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

以下為譯文：

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

作者：kevin

簡介

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

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

好了，回到現實，已經列出了全部之前遇到的問題作為未來參考的列表。相信這將能夠幫助你減少調試IE佈局不一致時花掉的時間。

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

在寫本文之前，遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重複的文本，被IE6顯示在靠近原文本的下面。(譯註：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。無法解決它，所以搜索它，果然，這是另一個IE6的bug。

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

但是，從 Hippy Tech Blog 那裡瞭解到，問題背後的原因是由於html註釋標籤。IE6不能正確的渲染它。下面是他建議的解決方案列表：

解決方法：

1. 使用標籤包圍註釋
2. 移除註釋
3. 在前浮動上增加樣式 {display:inline;}
4. 在適當的浮動的div上使用負邊距
5. 在原文本增加額外的 (比如10個空格) (hacky way)

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

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

解決方法：

為父元素增加 position:relative;

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

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

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

解決方法：

程序代碼

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

4、Bicubic圖像縮放(Bicubic Image Scaling)

你會喜歡這個的。IE那糟糕圖像縮放讓你很困擾？如果你拿IE和其他瀏覽器比較，IE縮小的圖像看起來不如其他瀏覽器。

解決方法：

程序代碼

img { -ms-interpolation-mode: bicubic; }

5、 PNG透明(PNG Transparency)

猜每個人都知道這個，但仍把它列在這裡，作為以後的參考。
所以如果你想要使用透明圖像並且GIF不能給你想要的質量，你會需要這個對PNG的hack。你必須意識到，如果你使用一張PNG圖像作為背景，你將不能設置背景的位置。

解決方法：

程序代碼

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

6、 IFrame透明背景 (IFrame Transparent Background)

在firefox和safari裡你應該不會遇到這個問題因為默認情況下，iframe的背景被設置為transparent，但是在IE裡，卻不是如此。你需要用到allowTransparency 屬性並且加入下面的CSS代碼來達成目的。

解決方法：

程序代碼

/* in the iframe element */

/* in the iframe docuement, in this case content.html */
body {
background-color:transparent;
}

7、禁用IE默認的垂直滾動條(Disabled IE default Vertical Scroll bar)

默認情況下，即使內容適合窗口大小，IE(譯註：IE6/7)也會顯示垂直滾動條。你可以使用overflow:auto，讓滾動條只在你需要時出現。

程序代碼

html {
overflow: auto;
}

8、:hover偽類(:hover Pseudo Class)

IE只支持元素的 :hover偽類。你可以使用jQuery的hover event來達到相同效果。

解決方法：

程序代碼