10個HTML和CSS代碼修正IE6問題的方法,ie6錯誤

我們知道，IE6可能過不了多久就會消失了，但是我們還能繼續支持這個瀏覽器並且避免hack和有約束的CSS嗎？這個帶給所有網頁設計師頭痛的瀏覽器(連微軟員工都討厭)這裡提供10個使用有效的HTML和CSS代碼來修正IE6主要問題的方法。

1.使用DOCTYPE

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

1





或者，對於XHTML使用:

1





你需要處理的最棘手的事情就是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;”
* 為浮動元素的最後一個條目使用一個條件註釋，比如：

1





* 在容器的最後元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)

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

IE6只認識對a標籤的CSS hover效果。

你也可以在基於JavaScript的組件內使用他們來控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是<>標籤比其它方案更可靠。
7.使用!important或高級選擇器來區分IE6

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

1
2
3
4
5



#element {
min-height: 20em;
height: auto !important; /*所有瀏覽器都理解這段代碼*/
height: 20em; /* IE6錯誤的使用這個值/*
}

IE6不理解min-height並錯誤的用20em覆蓋”auto”高度，但是，如果內容需要更多的空間的話，它會自動增加高度。

另外一個可選的方法是使用高級選擇器，比如eg

1
2
3
4
5
6
7
8
9



#element {
min-height: 20em;
height: 20em;
}

/* IE6無視下面的代碼*/
#element[id] {
height: auto;
}

8.避免百分比單位
網頁設計
百分比會把IE搞糊塗的。除非你可以確切的控制每一個父元素的大小，才可能做到最佳預防。你可以通過!important在其他瀏覽器中繼續使用百分比，比如：

1
2
3
4



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。