|
在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]–>
it知識庫:IE6在HTML標準下出現的bug小技巧,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。