相容ie6常見問題:10條有效html和css代碼

ie6目前依然是國內使用者的主要瀏覽器，因此作為網頁前端開發來說，無可避免必須相容IE6瀏覽器，這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。

我們知道ie會在一段時間內仍然流行，但是我們仍然可以支援瀏覽器並且避免hacks和條件css嗎？這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。

1、使用一個聲明
你必須經常在html網頁頭部放置一個聲明，推薦使用嚴格的標準。例如

或者xhtml使用

最後你需要是ie6進入相容模式，這已經足夠相容的了。

2、使用position: relative
設定一個標籤position: relative可以解決很多問題，特別是曾經有過看不見的經曆或者奇怪布局的架構。明顯的，你需要小心，絕對位置放置的子項目是否都參照找到新位置。

3、為浮動元素使用display:inline
浮動元素會有一個著名的ie6雙邊距margin bug。假如你設定了左邊距5px但實際上得到了10px左邊距。display:inline可以解決這個問題，儘管它不是必需的，但是css仍然有效。

4、設定元素啟動hasLayout
大部分ie6（ie7）的渲染問題都可以通過起來元素的hasLayout屬性來相容。這是ie內建的設定，確定一個內容塊相對其它內容塊是有界限和位置的。當你需要設定一個行內元素例如一個串連變成塊狀元素或者是透明效果，設定hasLayout也是必須的。

5、修複重複字元的bug
複雜的布局會觸發一個bug：浮動物件的最後字元會出現在已經清除浮動的元素後面。這裡有幾種解決的辦法，部分是理想的，並且一些測試和出錯是必須的。
a、確保浮動元素都使用：display:inline；
b、最後一個浮動元素使用margin-right:-3px;
c、在浮動物件最後一個元素後使用一個條件注釋。例如這裡輸入注釋…<![endif]
d、在容器內的最後使用一個div空標籤（它也必須設定90%寬度甚至更小）

6、使用a標籤完成可點擊和hover原理
Ie6隻支援a標籤的css定義hover效果
你可以使用它去控制javascript啟動的widgets，使得他們仍然保持鍵盤操作。這裡有個二擇一的問題，但是a標籤是所有解決方案中最可靠的。

7、使用!important，或是進階選擇符替代ie特定代碼
在外置的css檔案裡，放棄憑藉傳統的hacks和條件判斷，使用有效css代碼去針對ie6仍然是有可能的。例如：最小高度可以使用一下定義。
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}
Ie6不支援“min-height”並且錯誤的將20em重寫為“auto”。不過，當內容大於設定的空間時，它會增加它的尺寸。
另外一個選擇是使用進階選擇符。例如
#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}

8、避免百分比定義
百分比在ie下比較混亂。除非你非常小心每個父元素的尺寸，這樣就大概可以最後避免了。你仍然可以對其他瀏覽器使用!important來使用百分值。例如：
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9、早點和經常測試
在你的網站和應用程式完成之前，不要放棄ie6的測試。問題將會更加嚴重並且需要很長時間去修複。如果你的網站可以運行於firefox和ie6，它將差不多肯定可以在其它瀏覽器下運行。

10、重構你的代碼
經常的，修複會比重新考慮布局問題更加花費時間。Html細微的修改和更加簡單的css經常是最有效。這意味著你要放棄完美的合法的代碼，但是將會更少的問題出現，並且你知道怎樣處理將要出現的情況。