十個修復IE6下bug技巧

IE6的末日即將來臨,但這個末日也並非朝日可至,所以我們還是爭取最後的勝利,用各種hack和方法來規避IE6下雙邊距,背景透明,重複文字等等一堆bug。

10個修復IE6下bug技巧

IE6的末日即將來臨,對我們前端開發人員來說,無疑是一個慰藉人心的喜訊。但這個末日也並非朝日可至,所以我們還是爭取最後的勝利,用各種hack和方法來規避IE6下雙邊距,背景透明,重複文字等等一堆bug.下面是轉載自前端觀察中的10個修復IE6下bug技巧:

1.使用DOCTYPE

你應該在一直每個HTML文件的頭部都使用DOCTYPE,並且我們推薦使用strict版本,比如:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
或者,對於XHTML使用:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
你需要處理的最棘手的事情就是IE6進入quirks模式——它已經夠詭異了。

2.設置position:relative

將一個元素設置爲”position:relative”可以解決很多問題,特別是你曾經遇到隱藏的或對齊詭異的盒子。顯然,你需要非常小心點兒,因爲絕對定位的子節點可能會因此重新定位。

3.將浮動元素設置爲display:inline

具有margin屬性的浮動元素可能引起著名的IE6雙倍margin問題,比如,你爲一個元素指定margin-left爲5px,但是IE6中實際上卻表現爲10px。”display:inline”將解決這個問題,儘管這不是必須的,你的CSS仍然是有效的。

4.將一個元素設置爲hasLayout

很多IE6(和IE7)的渲染問題可以通過設置元素的hasLayout來解決。這是一個IE內部屬性(IE隱藏的,更多關於haslayout的資料,可以參閱這裏),用來確定相對於其他元素,內容是如何佈局和定位的。如果你需要設置一個inline元素(比如一個鏈接)爲block元素,或者是應用透明效果,設置hasLayout也可能是必須的。
最簡單的設置hasLayout的方法是爲CSS設置一個高度或寬度(zoom也可以用,但是zoom並不是CSS標準的一部分)。我們推薦設置實際尺寸,但是問題是這是不現實的,你可能需要使用”height:1%”。如果父元素並沒有設置高度,該元素的實際高度並不受影響,而且這個時候hasLayout已經被啓用。

5.修正重複文字bug

複雜的佈局可以觸發在浮動元素的最後一些字符可能出現在出現在清除元素下面的bug。這裏有幾個解決方法,有些是完美的,但是做一些反覆試驗也是必須的:
.確保所有的元素使用”display:inline;”
.在最後一個元素上使用一個”margin-right:-3px;”
.爲浮動元素的最後一個條目使用一個條件註釋,比如:

<!--[if!IE]>Putyourcommentaryinhere...<![endif]--> 

.在容器的最後元素使用一個空的div(它也有必要設置寬度爲90%或類似寬度。
>>>>>>你還可以訪問positioniseverything.net查看該問題的完整介紹。

6.在可點擊和懸停的元素上只使用<a>標籤

IE6只認識對a標籤的CSShover效果。
你也可以在基於JavaScript的組件內使用他們來控制,以使他們保持鍵盤的可操作性。是有一些可替代的選擇,但是<a>標籤比其它方案更可靠。

7.使用!important或高級選擇器來區分IE6

不使用傳統Hack或在額外文件中的條件CSS的方法,寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義:

#element{  
min-height:20em;  
height:auto!important;/*所有瀏覽器都理解這段代碼*/  
height:20em;/*IE6錯誤的使用這個值/*  
} 
IE6不理解min-height並錯誤的用20em覆蓋”auto”高度,但是,如果內容需要更多的空間的話,它會自動增加高度。
另外一個可選的方法是使用高級選擇器,比如e.g.
#element{  
min-height:20em;  
height:20em;  
}  
/*IE6無視下面的代碼*/  
#element[id]{  
height:auto;  
} 

8.避免百分比單位

百分比會把IE搞糊塗的。除非你可以確切的控制每一個父元素的大小,纔可能做到最佳預防。你可以通過!important在其他瀏覽器中繼續使用百分比,比如:

body{  
margin:2%0!important;  
margin:20px0;/*IE6only*/  
} 

9.儘早測試並不斷測試

不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕,而且會花更多時間來修正。如果你的網站能夠在Firefox和IE6中正常運行,那麼一般在其它瀏覽器就不會有問題。

10.重構你的代碼

經常發生的事情是,修正bug要比重新考慮一個佈局問題要花更長的時間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味着你要放棄完美的代碼,但是會出現較少的長期問題而且將來你會很清楚如果處理這些可能出現的問題。






發佈了29 篇原創文章 · 獲贊 43 · 訪問量 31萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章