雖然說IE8已經(jīng)來了,并且表現(xiàn)不錯。8個小時突破1200W下載,遠(yuǎn)遠(yuǎn)地超過24小時下載800W的firefox。但對于整個互聯(lián)網(wǎng),IE6仍然是用戶最多的瀏覽器。暫不說IE6怎樣,把Web的表現(xiàn)做得更好,既是一種責(zé)任,也是一種能力的表現(xiàn)。如果你依然對IE6所出現(xiàn)的種種問題無可奈何,就讓我?guī)銇砜匆幌聛碜許itePoint的 10 Fixes That Solve IE6 Problems,學(xué)會這10個方法,你將可以解決大部分IE6出現(xiàn)的問題。 1. 使用 DOCTYPE 你需要在HTML頁面的最頂部加上DOCTYPE類型,當(dāng)然, 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進(jìn)入怪癖模式 - 其實(shí)已經(jīng)夠多怪癖了。 2. 設(shè)置position: relative 設(shè)置position:relative 解決了不止一個問題,特別當(dāng)需要設(shè)置對齊的時候。很明顯,你需要明白的一點(diǎn)是,絕對定位是相對來說的。說不定,因?yàn)槟銢]有設(shè)置,而不知道東西都飛到那去了。比如,你設(shè)計(jì)了每篇文章前都有一張圖片,最后,你發(fā)現(xiàn),只有一張圖片在頁面上,或許,是他們重疊了。 3. 給浮動元素設(shè)置 display:inline 值 這源于著名的IE6雙倍外邊距BUG,例如,你給一個DIV設(shè)計(jì)了浮動,并且,設(shè)置了margin-left:5px; ,在IE6中很可能就是margin-left:10px 了,這里,給浮動元素設(shè)置 display:inline; ,即可解決問題。 4. 為元素設(shè)置 hasLayout 很多IE6(或IE7)的問題可以用設(shè)置hasLayout值的方法來解決。(如果你不知道hasLayout是什么,請看這里) 最簡單的給元素設(shè)置hasLayout值的方法是給加上CSS 的height或width(當(dāng)然,zoom也可以用,但這不是CSS的一部分)。設(shè)置一個具體的值是推薦的,但有時候并不一定知道高度多少,這里,你可能會用到height:1% 。如果父元素沒有設(shè)置高度,那么元素的物理高度并不會改變,但是,已經(jīng)具備hasLayout屬性。 5. 解決字符重復(fù)出現(xiàn)的問題 復(fù)雜的布局可能導(dǎo)致一些浮動元素里面的文字,出現(xiàn)在清理浮動位置的下面。這是一個奇怪的問題,下面這此可以幫你解決: - 確保浮動元素設(shè)置了
display:inline; - 在浮動元素中使用
margin-right:-3px; - 在浮動元素的最后一個元素后加上一個IE注釋,例如:
<!--[if !IE]>把你的注釋放這里 … <![endif]–> - 在最后的元素中加上一個DIV(這以設(shè)置width 為90% 或者其他相似的高度)
UPDATE: 最簡單的方法是刪除掉所有注釋。 你可以到positioniseverything.net中查看更多關(guān)于這個的解釋。 6.只在<a> 標(biāo)簽中使用hover,IE6只支持<a> 標(biāo)簽顯示hover樣式 當(dāng)然,你還是可以通過JS來解決這個方法。但是, 這關(guān)于到可訪問性的問題。建議不要把重要的內(nèi)容設(shè)置在利用JS來實(shí)現(xiàn)的hover中。 7. 使用!important 或高級選擇器來區(qū)分IE瀏覽器 比如min-height可以避免使用CSS來實(shí)現(xiàn)對IE的兼容。 #element { min-height: 20em; height: auto !important; height: 20em; /* 讓IE6顯示這個高度 */ } IE6 并不能正確地識別min-height,可以設(shè)置固定的高度,讓IE6解板為20em。即使如此,它還是會因?yàn)閮?nèi)容的尺寸擴(kuò)大而改變高度。而另一個方法是使用高級選擇器: #element { min-height: 20em; height: 20em; } /* 忽略 IE6 */ #element[id] { height: auto; } 8. 避免按比例確定的尺寸 比例會讓IE6變得錯亂,除非你給父元素添加一個確切的高度。不然,給其他的加上!important ,例如: body{ margin: 2% 0 !important; margin: 20px 0; /* IE6 可讀 */ } 9. 盡早測試,經(jīng)常測試 別忘記盡早測試,經(jīng)常測試, 除非你的程度已經(jīng)完成。不然,你可能花更多的時間來解決IE6的問題。一般情況下,如果你的網(wǎng)站能在IE6和firefox下良好表現(xiàn),估計(jì)其他瀏覽器就不會有什么大問題了。(至少我自己深有體會) 10. 重構(gòu)你的代碼 很多情況下,解決一個問題,可能比重構(gòu)你的代碼要花更多的時間。比如上一次給公司寫一個頻道頁面的,沒有一邊制作,一邊測試IE6的表現(xiàn),導(dǎo)致最近有很多奇怪的問題,因?yàn)椴季直容^復(fù)雜。后來,干脆重構(gòu)代碼。用了2兩。我想,如果是想解決方法,或許2天都搞不定。(via)
|