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]>網頁設計...<![endif]-->在容器的最後元素使用一個空的div(它也有必要設定寬度為90%或類似寬度。)
6. 在可點擊和懸停的元素上只使用<a>標籤
ie6隻認識對a標籤的css hover效果。
你也可以在基於網頁特效的組件內使用他們來控制,以使他們保持鍵盤的可操作性。是有一些可替代的選擇,但是<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中正常運行,那麼一般在其它瀏覽器就不會有問題。