IE6在HTML標準下出現的bug小技巧

作者: 大前端  發布時間: 2010-08-29 19:55  閱讀: 613 次  推薦: 0   原文鏈接   [收藏]  
摘要:對于WEB前端開發人員,最糾結的事就是瀏覽器兼容問題了,當然最恨的還是IE6,但是它的用戶量還是最大,所以我們還是有必要來看看它的相關兼容技巧。

  在IE8發布不久之后,Opera首席執行官Jon von Tetzchner曾經對外公開表示,微軟的IE8瀏覽器還會對網絡標準繼續破壞。不過隨著大家對IE8瀏覽器越來越了解,發現IE8對CSS標準的支持的確有非常大的改觀。

  微軟的IE8已采納了萬維網聯合會的HTML 5和CSS2.1標準,只是還沒有采用已使用于Mozilla,谷歌,和Opera瀏覽器的SVG。多年來面對W3C機構對HTML標準的開發停滯不前,微軟便以自己的IE瀏覽器引擎建立了自己的網絡標準。隨著各大瀏覽器的快速發展,同時也推動了HTML標準向前發展。

  從而使得IE瀏覽器獨立開發這些標準屬性跟HTML 5標準不太相符,這就扭曲了瀏覽器市場,迫使網站設計者建立的網頁需要同時兼容于IE6,IE7,IE8和其他的瀏覽器。

  既然外界的環境是WEB開發者無法改變的事情,那么我們只有加強自身的技能來適應目前的情況,不能寄希望與IE8的普及,這是一件很不靠譜的事情,頑固的IE6用戶未必會接受IE8。

  所以我們最近一年半載還是不能無視IE6。在設計網頁的時候我們也只有花更多時間來用于制作IE6的兼容性。這里我們總結了8個使用有效的HTML 和CSS代碼來修正網頁在IE6下顯示錯位情況的解決方法。

  1.設置position: relative

  將一個元素設置為”position:relative”可以解決很多問題,特別是你曾經遇到隱藏的或對齊詭異的盒子。

  2.將浮動元素設置為display:inline

  具有margin屬性的浮動元素可能引起的IE6雙倍margin問題,比如,你為一個元素指定margin-left為5px,但是IE6中實際上卻表現為10px。”display:inline”將解決這個問題,當然,方法也不是只有這一個。

  3.將一個元素設置為hasLayout

  很多IE6(和IE7)的渲染問題可以通過設置元素的hasLayout來解決。用來確定相對于其他元素,內容是如何布局和定位的。如果你需要設置一個inline元素(比如一個鏈接)為block元素,或者是應用透明效果。

  最簡單的設置hasLayout的方法是為CSS設置一個高度或寬度(zoom也可以用,但是zoom并不是CSS標準的一部分)。我們推薦設置實際尺寸,但是問題是這是不現實的,你可能需要使用”height:1%”。如果父元素并沒有設置高度,該元素的實際高度并不受影響,而且這個時候 hasLayout已經被啟用。

  4.修正重復文字bug

  復雜的布局可以觸發在浮動元素的最后一些字符可能出現在出現在清除元素下面的bug。這里有幾個解決方法,有些是完美的,但是做一些反復試驗也是必須的:

  ◆確保所有的元素使用”display:inline;”

  ◆在最后一個元素上使用一個”margin-right:-3px;”

  為浮動元素的最后一個條目使用一個條件注釋,比如:

 
<!–[if !IE]>Put your commentary in here…<![endif]–>

  在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)

  5.使用!important 或高級選擇器來區分IE6

  不使用傳統Hack或在額外文件中的條件CSS的方法,寫出特別針對IE6的可行的代碼也還是有可能的。比如最小高度可以通過這段代碼來定義:

 
#element {
min-height: 20em;
height: auto !important; /*所有瀏覽器都理解這段代碼*/
height: 20em; /* IE6 錯誤的使用這個值/*
}

  IE6 不理解min-height并錯誤的用20em覆蓋”auto”高度,但是,如果內容需要更多的空間的話,它會自動增加高度。另外一個可選的方法是使用高級選擇器,比如e.g。

 
#element {
min-height: 20em;
height: auto !important;
height: 20em;
overflow: visible;
}

  6.避免百分比單位

  百分比會把IE搞糊涂的。除非你可以確切的控制每一個父元素的大小,才可能做到最佳預防。你可以通過!important在其他瀏覽器中繼續使用百分比,比如:

 
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only*/
}

  7.盡早測試并不斷測試

  不要等到你的網站或應用完成了才測試IE6;這樣的話問題可能更糟糕,而且會花更多時間來修正。如果你的網站能夠在Firefox和IE6中正常運行,那么一般在其它瀏覽器就不會有問題。

  8.重構你的代碼

  經常發生的事情是,修正bug要比重新考慮一個布局問題要花更長的時間。對HTML做些小改動和一些簡單的CSS常常更有效。這可能意味著你要放棄完美的代碼,但是會出現較少的長期問題而且將來你會很清楚如果處理這些可能出現的問題。

  相信隨著IE8瀏覽器的普及,網站設計的瀏覽器兼容性問題將會大幅的減少。筆者認為,微軟IE8瀏覽器對于推動網站標準在網站建設中的應用將發揮積極作用。而預測在明年即將問世的IE9,也將會比IE8更好的符合對標準的支持。如果IE瀏覽器還缺乏對網絡標準的支持,那么他也將失去更多的用戶。

0
1
 
標簽:IE6
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()