下圖是本站統(tǒng)計(jì)系統(tǒng)中訪客詳情中瀏覽器查看率,IE6占據(jù)百分之40多。雖然瀏覽器的種類很多,光一個(gè)IE就有IE5.5,IE6,IE7,IE8等多版本,在這眾多的高版本中,IE6依然受大多數(shù)用戶所喜歡,所以排版時(shí)候就不的不去考慮IE6的兼容問(wèn)題,要不然會(huì)損失很多訪問(wèn)者。
下面列舉IE6中10個(gè)不得不注意的問(wèn)題:
1. 使用 DOCTYPE
你需要在HTML頁(yè)面的最頂部加上DOCTYPE類型,當(dāng)然, strict版是值得推薦的,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者, XHTML頁(yè)面的!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解決了不止一個(gè)問(wèn)題,特別當(dāng)需要設(shè)置對(duì)齊的時(shí)候。很明顯,你需要明白的一點(diǎn)是,絕對(duì)定位是相對(duì)來(lái)說(shuō)的。說(shuō)不定,因?yàn)槟銢](méi)有設(shè)置,而不知道東西都飛到那去了。比如,你設(shè)計(jì)了每篇文章前都有一張圖片,最后,你發(fā)現(xiàn),只有一張圖片在頁(yè)面上,或許,是他們重疊了。
3. 給浮動(dòng)元素設(shè)置 display:inline 值
這源于著名的IE6雙倍外邊距BUG,例如,你給一個(gè)DIV設(shè)計(jì)了浮動(dòng),并且,設(shè)置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,這里,給浮動(dòng)元素設(shè)置 display:inline;,即可解決問(wèn)題。
4. 為元素設(shè)置 hasLayout
很多IE6(或IE7)的問(wèn)題可以用設(shè)置hasLayout值的方法來(lái)解決。(如果你不知道hasLayout是什么,請(qǐng)看這里)
最簡(jiǎn)單的給元素設(shè)置hasLayout值的方法是給加上CSS 的height或width(當(dāng)然,zoom也可以用,但這不是CSS的一部分)。設(shè)置一個(gè)具體的值是推薦的,但有時(shí)候并不一定知道高度多少,這里,你可能會(huì)用到height:1%。如果父元素沒(méi)有設(shè)置高度,那么元素的物理高度并不會(huì)改變,但是,已經(jīng)具備hasLayout屬性。
5. 解決字符重復(fù)出現(xiàn)的問(wèn)題
復(fù)雜的布局可能導(dǎo)致一些浮動(dòng)元素里面的文字,出現(xiàn)在清理浮動(dòng)位置的下面。這是一個(gè)奇怪的問(wèn)題,下面這此可以幫你解決:
•確保浮動(dòng)元素設(shè)置了 display:inline;
•在浮動(dòng)元素中使用 margin-right:-3px;
•在浮動(dòng)元素的最后一個(gè)元素后加上一個(gè)IE注釋,例如: <!--[if !IE]>把你的注釋放這里… <![endif]-->
•在最后的元素中加上一個(gè)DIV(這以設(shè)置width 為90% 或者其他相似的高度)
UPDATE: 最簡(jiǎn)單的方法是刪除掉所有注釋。(感謝恬瑋兒的提示,我自己并沒(méi)有遇到過(guò),不過(guò),google了一下,發(fā)現(xiàn)這個(gè)方法也可以解決,并且,這是值得推薦的一個(gè)方法。)
你可以到positioniseverything.net中查看更多關(guān)于這個(gè)的解釋。
6.只在<a>標(biāo)簽中使用hover,IE6只支持<a>標(biāo)簽顯示hover樣式
當(dāng)然,你還是可以通過(guò)JS來(lái)解決這個(gè)方法。但是, 這關(guān)于到可訪問(wèn)性的問(wèn)題。建議不要把重要的內(nèi)容設(shè)置在利用JS來(lái)實(shí)現(xiàn)的hover中。
7. 使用!important 或高級(jí)選擇器來(lái)區(qū)分IE瀏覽器
比如min-height可以避免使用CSS來(lái)實(shí)現(xiàn)對(duì)IE的兼容。
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 讓IE6顯示這個(gè)高度 */
}
IE6 并不能正確地識(shí)別min-height,可以設(shè)置固定的高度,讓IE6解析為20em。即使如此,它還是會(huì)因?yàn)閮?nèi)容的尺寸擴(kuò)大而改變高度。而另一個(gè)方法是使用高級(jí)選擇器:
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}
8. 避免按比例確定的尺寸
比例會(huì)讓IE6變得錯(cuò)亂,除非你給父元素添加一個(gè)確切的高度。不然,給其他的加上!important,例如:
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可讀 */
}
9. 盡早測(cè)試,經(jīng)常測(cè)試
別忘記盡早測(cè)試,經(jīng)常測(cè)試, 除非你的程度已經(jīng)完成。不然,你可能花更多的時(shí)間來(lái)解決IE6的問(wèn)題。一般情況下,如果你的網(wǎng)站能在IE6和firefox下良好表現(xiàn),估計(jì)其他瀏覽器就不會(huì)有什么大問(wèn)題了。
10. 重構(gòu)你的代碼
很多情況下,解決一個(gè)問(wèn)題,可能比重構(gòu)你的代碼要花更多的時(shí)間。