10個技巧幫你搞定IE 6

但對于整個互聯網 , IE6仍然是用戶最多的瀏覽器 。暫不說IE6怎樣,把Web的表現做得更好,既是一種責任 , 也是一種能力的表現 。如果你依然對IE6所出現的種種問題無可奈何 , 就讓我帶你來看一下來自SitePoint的 10 Fixes That Solve IE6 Problems,學會這10個方法,你將可以解決大部分IE6出現的問題 。

10個技巧幫你搞定IE 6


1. 使用 DOCTYPE
你需要在HTML頁面的最頂部加上DOCTYPE類型 , 當然, strict版是值得推薦的,例如:

復制代碼代碼如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"


或者, XHTML頁面的!DOCTYPE:

復制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

你最不想看到的是,IE6進入怪癖模式其實已經夠多怪癖了 。
2. 設置position: relative
設置position:relative解決了不止一個問題,特別當需要設置對齊的時候 。很明顯,你需要明白的一點是,絕對定位是相對來說的 。說不定,因為你沒有設置,而不知道東西都飛到那去了 。比如,你設計了每篇文章前都有一張圖片,最后,你發現,只有一張圖片在頁面上,或許,是他們重疊了 。

3. 給浮動元素設置 display:inline 值
這源于著名的IE6雙倍外邊距BUG,例如,你給一個DIV設計了浮動,并且,設置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,這里,給浮動元素設置 display:inline;,即可解決問題 。

4. 為元素設置 hasLayout
很多IE6(或IE7)的問題可以用設置hasLayout值的方法來解決 。(如果你不知道hasLayout是什么 , 請看這里)

最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(當然,zoom也可以用,但這不是CSS的一部分) 。設置一個具體的值是推薦的,但有時候并不一定知道高度多少,這里,你可能會用到height:1% 。如果父元素沒有設置高度,那么元素的物理高度并不會改變,但是,已經具備hasLayout屬性 。

5. 解決字符重復出現的問題
復雜的布局可能導致一些浮動元素里面的文字,出現在清理浮動位置的下面 。這是一個奇怪的問題,下面這此可以幫你解決:

確保浮動元素設置了 display:inline;
在浮動元素中使用 margin-right:-3px;
在浮動元素的最后一個元素后加上一個IE注釋 , 例如: !--[if !IE]把你的注釋放這里 ![endif]--
在最后的元素中加上一個DIV(這以設置width 為90% 或者其他相似的高度)
UPDATE: 最簡單的方法是刪除掉所有注釋 。(感謝恬瑋兒的提示,我自己并沒有遇到過 , 不過,google了一下,發現這個方法也可以解決 , 并且 , 這是值得推薦的一個方法 。)

你可以到positioniseverything.net中查看更多關于這個的解釋 。

6.只在a標簽中使用hover,IE6只支持a標簽顯示hover樣式
當然 , 你還是可以通過JS來解決這個方法 。但是 , 這關于到可訪問性的問題 。建議不要把重要的內容設置在利用JS來實現的hover中 。

7. 使用!important 或高級選擇器來區分IE瀏覽器
比如min-height可以避免使用CSS來實現對IE的兼容 。


復制代碼代碼如下:
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 讓IE6顯示這個高度 */
}

IE6 并不能正確地識別min-height , 可以設置固定的高度,讓IE6解析為20em 。即使如此,它還是會因為內容的尺寸擴大而改變高度 。而另一個方法是使用高級選擇器:

復制代碼代碼如下:
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}

8. 避免按比例確定的尺寸
比例會讓IE6變得錯亂,除非你給父元素添加一個確切的高度 。不然,給其他的加上!important,例如:

復制代碼代碼如下:
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可讀 */
}

9. 盡早測試,經常測試
別忘記盡早測試,經常測試,除非你的程度已經完成 。不然,你可能花更多的時間來解決IE6的問題 。一般情況下,如果你的網站能在IE6和firefox下良好表現,估計其他瀏覽器就不會有什么大問題了 。(至少我自己深有體會)

10. 重構你的代碼
很多情況下,解決一個問題 , 可能比重構你的代碼要花更多的時間 。比如上一次給公司寫一個頻道頁面的,沒有一邊制作 , 一邊測試IE6的表現,導致最近有很多奇怪的問題,因為布局比較復雜 。后來,干脆重構代碼 。用了2天 。我想,如果是想解決方法 , 或許2天都搞不定 。

相關經驗推薦