十個(gè)修復(fù)IE6下bug技巧
IE6的末日即將來(lái)臨，但這個(gè)末日也并非朝日可至,所以我們還是爭(zhēng)取***的勝利，用各種hack和方法來(lái)規(guī)避IE6下雙邊距，背景透明，重復(fù)文字等等一堆bug。
10個(gè)修復(fù)IE6下bug技巧
IE6的末日即將來(lái)臨，對(duì)我們前端開(kāi)發(fā)人員來(lái)說(shuō),無(wú)疑是一個(gè)慰藉人心的喜訊。但這個(gè)末日也并非朝日可至,所以我們還是爭(zhēng)取***的勝利,用各種hack和方法來(lái)規(guī)避IE6下雙邊距,背景透明,重復(fù)文字等等一堆bug.下面是轉(zhuǎn)載自前端觀察中的10個(gè)修復(fù)IE6下bug技巧:
1.使用DOCTYPE
你應(yīng)該在一直每個(gè)HTML文件的頭部都使用DOCTYPE，并且我們推薦使用strict版本，比如：
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
或者，對(duì)于XHTML使用:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你需要處理的最棘手的事情就是IE6進(jìn)入quirks模式——它已經(jīng)夠詭異了。
2.設(shè)置position:relative
將一個(gè)元素設(shè)置為”position:relative”可以解決很多問(wèn)題，特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。顯然，你需要非常小心點(diǎn)兒，因?yàn)榻^對(duì)定位的子節(jié)點(diǎn)可能會(huì)因此重新定位。
3.將浮動(dòng)元素設(shè)置為display:inline
具有margin屬性的浮動(dòng)元素可能引起著名的IE6雙倍margin問(wèn)題，比如，你為一個(gè)元素指定margin-left為5px，但是IE6中實(shí)際上卻表現(xiàn)為10px。”display:inline”將解決這個(gè)問(wèn)題，盡管這不是必須的，你的CSS仍然是有效的。
4.將一個(gè)元素設(shè)置為hasLayout
很多IE6(和IE7)的渲染問(wèn)題可以通過(guò)設(shè)置元素的hasLayout來(lái)解決。這是一個(gè)IE內(nèi)部屬性（IE隱藏的，更多關(guān)于haslayout的資料，可以參閱這里），用來(lái)確定相對(duì)于其他元素，內(nèi)容是如何布局和定位的。如果你需要設(shè)置一個(gè)inline元素(比如一個(gè)鏈接)為block元素，或者是應(yīng)用透明效果，設(shè)置hasLayout也可能是必須的。
最簡(jiǎn)單的設(shè)置hasLayout的方法是為CSS設(shè)置一個(gè)高度或?qū)挾龋▃oom也可以用，但是zoom并不是CSS標(biāo)準(zhǔn)的一部分）。我們推薦設(shè)置實(shí)際尺寸，但是問(wèn)題是這是不現(xiàn)實(shí)的，你可能需要使用”height:1%”。如果父元素并沒(méi)有設(shè)置高度，該元素的實(shí)際高度并不受影響，而且這個(gè)時(shí)候hasLayout已經(jīng)被啟用。
5.修正重復(fù)文字bug
復(fù)雜的布局可以觸發(fā)在浮動(dòng)元素的***一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法，有些是***的，但是做一些反復(fù)試驗(yàn)也是必須的：
.確保所有的元素使用”display:inline;”
.在***一個(gè)元素上使用一個(gè)”margin-right:-3px;”
.為浮動(dòng)元素的***一個(gè)條目使用一個(gè)條件注釋，比如：
- <!--[if!IE]>Putyourcommentaryinhere...<![endif]-->
.在容器的***元素使用一個(gè)空的div(它也有必要設(shè)置寬度為90%或類似寬度。
>>>>>>你還可以訪問(wèn)positioniseverything.net查看該問(wèn)題的完整介紹。
6.在可點(diǎn)擊和懸停的元素上只使用<a>標(biāo)簽
IE6只認(rèn)識(shí)對(duì)a標(biāo)簽的CSShover效果。
你也可以在基于JavaScript的組件內(nèi)使用他們來(lái)控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是<a>標(biāo)簽比其它方案更可靠。
7.使用!important或高級(jí)選擇器來(lái)區(qū)分IE6
不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法，寫(xiě)出特別針對(duì)IE6的可行的代碼也還是有可能的。比如最小高度可以通過(guò)這段代碼來(lái)定義：
- #element{
- min-height:20em;
- height:auto!important;/*所有瀏覽器都理解這段代碼*/
- height:20em;/*IE6錯(cuò)誤的使用這個(gè)值/*
- }
IE6不理解min-height并錯(cuò)誤的用20em覆蓋”auto”高度，但是，如果內(nèi)容需要更多的空間的話，它會(huì)自動(dòng)增加高度。
另外一個(gè)可選的方法是使用高級(jí)選擇器，比如e.g.
- #element{
- min-height:20em;
- height:20em;
- }
- /*IE6無(wú)視下面的代碼*/
- #element[id]{
- height:auto;
- }
8.避免百分比單位
百分比會(huì)把IE搞糊涂的。除非你可以確切的控制每一個(gè)父元素的大小，才可能做到***預(yù)防。你可以通過(guò)!important在其他瀏覽器中繼續(xù)使用百分比，比如：
- body{
- margin:2%0!important;
- margin:20px0;/*IE6only*/
- }
9.盡早測(cè)試并不斷測(cè)試
不要等到你的網(wǎng)站或應(yīng)用完成了才測(cè)試IE6;這樣的話問(wèn)題可能更糟糕，而且會(huì)花更多時(shí)間來(lái)修正。如果你的網(wǎng)站能夠在Firefox和IE6中正常運(yùn)行，那么一般在其它瀏覽器就不會(huì)有問(wèn)題。
10.重構(gòu)你的代碼
經(jīng)常發(fā)生的事情是，修正bug要比重新考慮一個(gè)布局問(wèn)題要花更長(zhǎng)的時(shí)間。對(duì)HTML做些小改動(dòng)和一些簡(jiǎn)單的CSS常常更有效。這可能意味著你要放棄***的代碼，但是會(huì)出現(xiàn)較少的長(zhǎng)期問(wèn)題而且將來(lái)你會(huì)很清楚如果處理這些可能出現(xiàn)的問(wèn)題。
【編輯推薦】
- IE6 IE7 IE8瀏覽器的兼容性PK
- 單獨(dú)對(duì)IE6兼容進(jìn)行處理的方法揭秘
- IE6 IE7 IE8 FF瀏覽器的CSS兼容問(wèn)題探究
- 微軟發(fā)布升級(jí)版IE8Beta2瀏覽器 新特性敬請(qǐng)關(guān)注
- 技術(shù)前沿 DIV+CSS布局網(wǎng)頁(yè)對(duì)網(wǎng)站SEO的影響
