武林網(wǎng)(www.survivalescaperooms.com)文章簡介:解決IE6的bug的好方法或技巧
我們知道,IE6可能過不了多久就會消失了,但是我們還能繼續(xù)支持這個(gè)瀏覽器并且避免hack和有約束的CSS嗎?這里是10個(gè)使用有效的HTML和CSS代碼來修正IE6主要問題的方法。
1. 使用DOCTYPE你應(yīng)該在一直每個(gè)HTML文件的頭部都使用DOCTYPE,并且我們推薦使用strict 版本,比如:
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
或者,對于XHTML使用:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
你需要處理的最棘手的事情就是IE6進(jìn)入quirks模式——它已經(jīng)夠詭異了。
2. 設(shè)置position: relative將一個(gè)元素設(shè)置為”position:relative”可以解決很多問題,特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。顯然,你需要非常小心點(diǎn)兒,因?yàn)榻^對定位的子節(jié)點(diǎn)可能會因此重新定位。
3. 將浮動元素設(shè)置為display:inline具有margin屬性的浮動元素可能引起著名的IE6雙倍margin問題,比如,你為一個(gè)元素指定margin-left為5px,但是IE6中實(shí)際上卻表現(xiàn)為10px。”display:inline”將解決這個(gè)問題,盡管這不是必須的,你的CSS仍然是有效的。
4. 將一個(gè)元素設(shè)置為hasLayout很多IE6(和IE7)的渲染問題可以通過設(shè)置元素的hasLayout來解決。 這是一個(gè)IE內(nèi)部屬性(IE隱藏的,更多關(guān)于haslayout的資料,可以參閱這里),用來確定相對于其他元素,內(nèi)容是如何布局和定位的。如果你需要設(shè)置一個(gè)inline元素(比如一個(gè)鏈接)為block元素,或者是應(yīng)用透明效果,設(shè)置hasLayout也可能是必須的。
最簡單的設(shè)置hasLayout的方法是為CSS設(shè)置一個(gè)高度或?qū)挾龋▃oom也可以用,但是zoom并不是CSS標(biāo)準(zhǔn)的一部分)。我們推薦設(shè)置實(shí)際尺寸,但是問題是這是不現(xiàn)實(shí)的,你可能需要使用”height:1%”。如果父元素并沒有設(shè)置高度,該元素的實(shí)際高度并不受影響,而且這個(gè)時(shí)候hasLayout已經(jīng)被啟用。
5. 修正重復(fù)文字bug復(fù)雜的布局可以觸發(fā)在浮動元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法,有些是完美的,但是做一些反復(fù)試驗(yàn)也是必須的:
1 <!--[if !IE]>Put your commentary in here...<![endif]-->
IE6只認(rèn)識對a標(biāo)簽的CSS hover效果。
你也可以在基于JavaScript的組件內(nèi)使用他們來控制,以使他們保持鍵盤的可操作性。是有一些可替代的選擇,但是<a>標(biāo)簽比其它方案更可靠。
7. 使用!important 或高級選擇器來區(qū)分IE6不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法,寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義:
12345!important/* IE6 錯(cuò)誤的使用這個(gè)值 /*}
IE6 不理解min-height并錯(cuò)誤的用20em覆蓋”auto”高度,但是,如果內(nèi)容需要更多的空間的話,它會自動增加高度。
另外一個(gè)可選的方法是使用高級選擇器,比如e.g.
123456789 id
8. 避免百分比單位百分比會把IE搞糊涂的。除非你可以確切的控制每一個(gè)父元素的大小,才可能做到最佳預(yù)防。你可以通過!important在其他瀏覽器中繼續(xù)使用百分比,比如:
1234body %
9. 盡早測試并不斷測試不要等到你的網(wǎng)站或應(yīng)用完成了才測試IE6;這樣的話問題可能更糟糕,而且會花更多時(shí)間來修正。如果你的網(wǎng)站能夠在Firefox和IE6中正常運(yùn)行,那么一般在其它瀏覽器就不會有問題。
10. 重構(gòu)你的代碼經(jīng)常發(fā)生的事情是,修正bug要比重新考慮一個(gè)布局問題要花更長的時(shí)間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味著你要放棄完美的代碼,但是會出現(xiàn)較少的長期問題而且將來你會很清楚如果處理這些可能出現(xiàn)的問題。
神飛感言,雖然IE8并沒有從根本上改變IE,但是它對CSS標(biāo)準(zhǔn)的支持的確有非常大的改觀。但是即便如此,我們依然不能寄希望與IE8的普及,這是一件很不靠譜的事情,頑固的IE6用戶未必會接受IE8。所以我們最近一年半載還是不能無視IE6。
新聞熱點(diǎn)
疑難解答
圖片精選