IE6 bug修正的10個小技巧 推薦
【IE6 bug修正的10個小技巧 推薦】1. 使用DOCTYPE
你應該在一直每個HTML文件的頭部都使用DOCTYPE , 并且我們推薦使用strict 版本,比如:
復制代碼代碼如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
或者,對于XHTML使用:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//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]Put your commentary in here...![endif]--
在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度 。)
訪問 positioniseverything.net 查看該問題的完整介紹 。
6. 在可點擊和懸停的元素上只使用a標簽
IE6只認識對a標簽的CSS hover效果 。
你也可以在基于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: 20px 0; /* IE6 only */
}
9. 盡早測試并不斷測試
不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕,而且會花更多時間來修正 。如果你的網站能夠在Firefox和IE6中正常運行,那么一般在其它瀏覽器就不會有問題 。
10. 重構你的代碼
經常發生的事情是,修正bug要比重新考慮一個布局問題要花更長的時間 。對HTML做些小改動和一些簡單的CSS常常更有效 。這可能意味著你要放棄完美的代碼,但是會出現較少的長期問題而且將來你會很清楚如果處理這些可能出現的問題 。
神飛感言,雖然IE8并沒有從根本上改變IE,但是它對CSS標準的支持的確有非常大的改觀 。但是即便如此,我們依然不能寄希望與IE8的普及,這是一件很不靠譜的事情,頑固的IE6用戶未必會接受IE8 。所以我們最近一年半載還是不能無視IE6 。
如果你有其它比較好的可以解決IE6的bug的好方法或技巧,別忘了告訴前端觀察哦~
