修正IE6在HTML標(biāo)準(zhǔn)下出現(xiàn)bug的小技巧
在IE8發(fā)布不久之后，Opera首席執(zhí)行官Jon von Tetzchner曾經(jīng)對外公開表示，微軟的IE8瀏覽器還會對網(wǎng)絡(luò)標(biāo)準(zhǔn)繼續(xù)破壞。不過隨著大家對IE8瀏覽器越來越了解，發(fā)現(xiàn)IE8對CSS標(biāo)準(zhǔn)的支持的確有非常大的改觀。
微軟的IE8已采納了萬維網(wǎng)聯(lián)合會的HTML 5和CSS2.1標(biāo)準(zhǔn)，只是還沒有采用已使用于Mozilla，谷歌，和Opera瀏覽器的SVG。多年來面對W3C機(jī)構(gòu)對HTML標(biāo)準(zhǔn)的開發(fā)停滯不前，微軟便以自己的IE瀏覽器引擎建立了自己的網(wǎng)絡(luò)標(biāo)準(zhǔn)。隨著各大瀏覽器的快速發(fā)展，同時(shí)也推動了HTML標(biāo)準(zhǔn)向前發(fā)展。
從而使得IE瀏覽器獨(dú)立開發(fā)這些標(biāo)準(zhǔn)屬性跟HTML 5標(biāo)準(zhǔn)不太相符，這就扭曲了瀏覽器市場，迫使網(wǎng)站設(shè)計(jì)者建立的網(wǎng)頁需要同時(shí)兼容于IE6,IE7,IE8和其他的瀏覽器。
既然外界的環(huán)境是WEB開發(fā)者無法改變的事情，那么我們只有加強(qiáng)自身的技能來適應(yīng)目前的情況，不能寄希望與IE8的普及，這是一件很不靠譜的事情，頑固的IE6用戶未必會接受IE8。
所以我們最近一年半載還是不能無視IE6。在設(shè)計(jì)網(wǎng)頁的時(shí)候我們也只有花更多時(shí)間來用于制作IE6的兼容性。這里我們總結(jié)了8個(gè)使用有效的HTML和CSS代碼來修正網(wǎng)頁在IE6下顯示錯(cuò)位情況的解決方法。
1. 設(shè)置position: relative
將一個(gè)元素設(shè)置為”position:relative”可以解決很多問題，特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。
2.將浮動元素設(shè)置為display:inline
具有margin屬性的浮動元素可能引起的IE6雙倍margin問題，比如，你為一個(gè)元素指定margin-left為5px，但是IE6中實(shí)際上卻表現(xiàn)為10px。”display:inline”將解決這個(gè)問題，當(dāng)然，方法也不是只有這一個(gè)。
3. 將一個(gè)元素設(shè)置為hasLayout
很多IE6(和IE7)的渲染問題可以通過設(shè)置元素的hasLayout來解決。 用來確定相對于其他元素，內(nèi)容是如何布局和定位的。如果你需要設(shè)置一個(gè)inline元素(比如一個(gè)鏈接)為block元素，或者是應(yīng)用透明效果。
最簡單的設(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)被啟用。
4. 修正重復(fù)文字bug
復(fù)雜的布局可以觸發(fā)在浮動元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法，有些是完美的，但是做一些反復(fù)試驗(yàn)也是必須的：
◆確保所有的元素使用”display:inline;”
◆在最后一個(gè)元素上使用一個(gè)”margin-right:-3px;”
為浮動元素的最后一個(gè)條目使用一個(gè)條件注釋，比如：
- <!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一個(gè)空的div(它也有必要設(shè)置寬度為90%或類似寬度。)
5. 使用!important 或高級選擇器來區(qū)分IE6
不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法，寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義：
- #element {
- min-height: 20em;
- height: auto !important; /* 所有瀏覽器都理解這段代碼 */
- height: 20em; /* IE6 錯(cuò)誤的使用這個(gè)值 /*
- }
IE6 不理解min-height并錯(cuò)誤的用20em覆蓋”auto”高度，但是，如果內(nèi)容需要更多的空間的話，它會自動增加高度。另外一個(gè)可選的方法是使用高級選擇器，比如e.g。
- #element {
- min-height: 20em;
- height: auto !important;
- height: 20em;
- overflow: visible;
- }
6. 避免百分比單位
百分比會把IE搞糊涂的。除非你可以確切的控制每一個(gè)父元素的大小，才可能做到最佳預(yù)防。你可以通過!important在其他瀏覽器中繼續(xù)使用百分比，比如：
- body {
- margin: 2% 0 !important;
- margin: 20px 0; /* IE6 only */
- }
7. 盡早測試并不斷測試
不要等到你的網(wǎng)站或應(yīng)用完成了才測試IE6;這樣的話問題可能更糟糕，而且會花更多時(shí)間來修正。如果你的網(wǎng)站能夠在Firefox和IE6中正常運(yùn)行，那么一般在其它瀏覽器就不會有問題。
8. 重構(gòu)你的代碼
經(jīng)常發(fā)生的事情是，修正bug要比重新考慮一個(gè)布局問題要花更長的時(shí)間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味著你要放棄完美的代碼，但是會出現(xiàn)較少的長期問題而且將來你會很清楚如果處理這些可能出現(xiàn)的問題。
相信隨著IE8瀏覽器的普及，網(wǎng)站設(shè)計(jì)的瀏覽器兼容性問題將會大幅的減少。筆者認(rèn)為，微軟IE8瀏覽器對于推動網(wǎng)站標(biāo)準(zhǔn)在網(wǎng)站建設(shè)中的應(yīng)用將發(fā)揮積極作用。而預(yù)測在明年即將問世的IE9，也將會比IE8更好的符合對標(biāo)準(zhǔn)的支持。如果IE瀏覽器還缺乏對網(wǎng)絡(luò)標(biāo)準(zhǔn)的支持，那么他也將失去更多的用戶。
【編輯推薦】
