國外有很多優秀的文章可以用來學習,我決定花點時間翻譯。我並不知道這篇文章有沒有人翻譯過,原文名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不能正確的渲染它。以下是他建議的解決方案清單:
解決方法:
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;
}