10個(gè)糟糕的IE Bug及其修復(fù)
國外有很多優(yōu)秀的文章可以用來學(xué)習(xí),我決定花些時(shí)間翻譯。我并不知道這篇文章有沒有人翻譯過,原文名 10 Awful IE Bugs and Fixes,我希望能有更多人能看到這些優(yōu)秀的文章。外國人很幽默,所以我也就全文翻了。高手繞道
以下為譯文:
我列舉了10個(gè)常見的IE bug和解決方法。我相信這將能夠幫助你減少調(diào)試IE布局不一致時(shí)花掉的時(shí)間。
作者:kevin
簡介
在處理IE方面每個(gè)人都有他們自己的故事。作為一個(gè)開發(fā)者我不得不面對大量的IE的古里古怪的問題并且有的時(shí)候你只是想用頭撞墻。但是隨著時(shí)間的推移,我們慢慢吃一塹長一智(有些時(shí)候那不是我們的錯(cuò),是IE的錯(cuò)。┎⑶议_始接受和理解IE的怪異行為。我們不得不這樣因?yàn)槿匀挥袛?shù)量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的瀏覽器測試你的網(wǎng)站。從一開始就解決布局問題要比在數(shù)千行html和css代碼之后容易的多。
有很多運(yùn)動在抗議IE6,支持它的是大多數(shù)web專家和看起來不怎么關(guān)心的普通用戶。所以,我們現(xiàn)在能做什么?我們不得不繼續(xù)挖掘來解決IE6的問題。但是,等一下,有一個(gè)振奮人心的消息;趙3cschool的月度報(bào)表,IE6的用戶這些年已經(jīng)減少了一些。從2006年6月的60.3%到現(xiàn)在2009年9月的13.6%。按照這種比例,我們應(yīng)該能在2010年年底的時(shí)候放棄IE6(譯注:國外的情況還真是一片大好啊~。~)
好了,回到現(xiàn)實(shí),我已經(jīng)列出了全部我之前遇到的問題作為未來參考的列表。我相信這將能夠幫助你減少調(diào)試IE布局不一致時(shí)花掉的時(shí)間。
1、IE6 幽靈文本(Ghost Text bug)
在我寫本文之前,我遇到了這個(gè)bug。它相當(dāng)?shù)墓殴趾突R粔K不知哪來的重復(fù)的文本,被IE6顯示在靠近原文本的下面。(譯注:也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它,所以我搜索它,果然,這是另一個(gè)IE6的bug。
對此有許多解決方法,但是沒有一個(gè)對我的例子有效(因?yàn)榫W(wǎng)站的復(fù)雜性我無法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起來能解決這個(gè)問題。
但是,從 Hippy Tech Blog 那里了解到,問題背后的原因是由于html注釋標(biāo)簽。IE6不能正確的渲染它。下面是他建議的解決方案列表:
解決方法:
- 使用<!—[IF !IE]>標(biāo)簽包圍注釋
- 移除注釋
- 在前浮動上增加樣式 {display:inline;}
- 在適當(dāng)?shù)母拥膁iv上使用負(fù)邊距
- 在原文本增加額外的 (比如10個(gè)空格) (hacky way)
2、相對位置和溢出隱藏(Position Relative and Overflow Hidden)
這個(gè)問題我遇到過很多次,當(dāng)時(shí)我正在準(zhǔn)備一個(gè)JQuery的教程,因?yàn)槲沂褂昧撕芏鄌verflow hidden來達(dá)到我想要的布局。 問題發(fā)生在當(dāng)父元素的overflow被設(shè)置成hidden并且子元素被設(shè)置成position:relative。 CSS-Trick有一個(gè)很好的例子來演示這個(gè)bug。position:relative and overflow in internet explorer
解決方法:
為父元素增加position:relative;
3、IE的最小高度(Min-Height for IE)
這很簡單,IE忽略min-height屬性。你可以用下面的hack來修復(fù)它。感謝Dustin Diaz。
這個(gè)解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2里都工作的很好。
解決方法:
selector { min-height:500px; height:auto !important; height:500px; }
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 下一頁 10個(gè)糟糕的IE Bug及其修復(fù) [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|