DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 修正IE6在HTML標准下出現bug的小技巧
修正IE6在HTML標准下出現bug的小技巧
編輯:CSS詳解     

在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;”

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

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

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

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

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

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

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

  1. #element {
  2. min-height: 20em;
  3. height: auto !important;
  4. height: 20em;
  5. overflow: visible;
  6. }

6. 避免百分比單位

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

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

7. 盡早測試並不斷測試

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

8. 重構你的代碼

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved