防止IE6出现BUG的十种常见解决方法
| 以下介紹的十種解決方法是針對IE6經常會出現的DIV+CSS布局BUG而使用的一些默認設置，由于IE6的BUG比較多，所以我們制作頁面時經常會碰到一些莫名其妙的布局問題，每次碰到問題我們就會查找對因的頁面位置與CSS，使用以下解決方法就可以避免一些常見的IE6的BUG問題。 |
雖然說IE8已經來了，并且表現不錯。8個小時突破1200W下載，遠遠地超過24小時下載800W的firefox。但對于整個互聯網，IE6仍然是用戶最多的瀏覽器。暫不說IE6怎樣，把Web的表現做得更好，既是一種責任，也是一種能力的表現。如果你依然對IE6所出現的種種問題無可奈何，就讓我帶你來看一下來自SitePoint的 10 Fixes That Solve IE6 Problems，學會這10個方法，你將可以解決大部分IE6出現的問題。
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天都搞不定。
總結
以上是生活随笔為你收集整理的防止IE6出现BUG的十种常见解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 张亚勤：领导者的3种能力
- 下一篇： 我国有线电视信源编码现有体制和对高清的制