DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 破洛洛整理10個常見的IE bug和解決方法
破洛洛整理10個常見的IE bug和解決方法
編輯:CSS進階教程     

破洛洛文章簡介:IE浏覽器常見的10個BUG及解決方法.

我列舉了10個常見的IE bug和解決方法。我相信這將能夠幫助你減少調試IE布局不一致時花掉的時間。

在處理IE方面每個人都有他們自己的故事。作為一個開發者我不得不面對大量的IE的古裡古怪的問題並且有的時候你只是想用頭撞牆。但是隨著時間的推移,我們慢慢吃一塹長一智(有些時候那不是我們的錯,是IE的錯!)並且開始接受和理解IE的怪異行為。我們不得不這樣因為仍然有數量可觀的IE6用戶。最好的做法是一開始就不斷的從不同的浏覽器測試你的網站。從一開始就解決布局問題要比在數千行html和css代碼之後容易的多。

有很多運動在抗議IE6,支持它的是大多數web專家和看起來不怎麼關心的普通用戶。所以,我們現在能做什麼?我們不得不繼續挖掘來解決IE6的問題。但是,等一下,有一個振奮人心的消息。基於w3cschool的月度報表,IE6的用戶這些年已經減少了一些。從2006年6月的60.3%到現在2009年9月的13.6%。按照這種比例,我們應該能在2010年年底的時候放棄IE6(譯注:國外的情況還真是一片大好啊~。~)

好了,回到現實,我已經列出了全部我之前遇到的問題作為未來參考的列表。我相信這將能夠幫助你減少調試IE布局不一致時花掉的時間。

1、IE6 幽靈文本(Ghost Text bug)

在我寫本文之前,我遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重復的文本,被IE6顯示在靠近原文本的下面。(譯注:也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它,所以我搜索它,果然,這是另一個IE6的bug。

對此有許多解決方法,但是沒有一個對我的例子有效(因為網站的復雜性我無法使用其中的一些方法)。所以我使用了hack。在原文本之後增加空格看起來能解決這個問題。

但是,從 Hippy Tech Blog 那裡了解到,問題背後的原因是由於html注釋標簽。IE6不能正確的渲染它。下面是他建議的解決方案列表:

解決方法

  1. 使用<!—[IF !IE]>標簽包圍注釋
  2. 移除注釋
  3. 在前浮動上增加樣式 {display:inline;}
  4. 在適當的浮動的div上使用負邊距
  5. 在原文本增加額外的&nbsp;(比如10個空格) (hacky way)

2、相對位置和溢出隱藏(Position Relative and Overflow Hidden)

這個問題我遇到過很多次,當時我正在准備一個JQuery的教程,因為我使用了很多overflow hidden來達到我想要的布局。
問題發生在當父元素的overflow被設置成hidden並且子元素被設置成position:relative。
CSS-Trick有一個很好的例子來演示這個bug。position:relative and overflow in internet explorer

解決方法

為父元素增加position:relative;

3、IE的最小高度(Min-Height for IE)

這很簡單,IE忽略min-height屬性。你可以用下面的hack來修復它。感謝Dustin Diaz。

這個解決方法在IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2裡都工作的很好。

解決方法

 

selector { 
    min-height:500px; 
    height:auto !important; 
    height:500px; 
}

 

4、Bicubic圖像縮放(Bicubic Image Scaling)

你會喜歡這個的。IE那糟糕圖像縮放讓你很困擾?如果你拿IE和其他浏覽器比較,IE縮小的圖像看起來不如其他浏覽器。

解決方法

 

img { -ms-interpolation-mode: bicubic; }

 

5、 PNG透明(PNG Transparency)

我猜每個人都知道這個,但我仍把它列在這裡,作為以後的參考。
所以如果你想要使用透明圖像並且GIF不能給你想要的質量,你會需要這個對PNG的hack。你必須意識到,如果你使用一張PNG圖像作為背景,你將不能設置背景的位置。

解決方法:

 

img { 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); 
}

 

6、 IFrame透明背景 (IFrame Transparent Background)

在firefox和safari裡你應該不會遇到這個問題因為默認情況下,iframe的背景被設置為transparent,但是在IE裡,卻不是如此。你需要用到allowTransparency 屬性並且加入下面的CSS代碼來達成目的。

解決方法

 

/* in the iframe element */ 
<iframe src="content.html" allowTransparency="true"> 
</iframe> 

/* in the iframe docuement, in this case content.html */ 
body {
    background-color:transparent;    
}

 

7、禁用IE默認的垂直滾動條(Disabled IE default Vertical Scroll bar)

默認情況下,即使內容適合窗口大小,IE(譯注:IE6/7)也會顯示垂直滾動條。你可以使用overflow:auto,讓滾動條只在你需要時出現。

 

html {
    overflow: auto; 
}

 

8、:hover偽類(:hover Pseudo Class)

IE只支持<a>元素的 :hover偽類。你可以使用jQuery的hover event來達到相同效果。

解決方法

 

/* jQuery Script */ 
$('#list li').hover( 

    function () { 
        $(this).addClass('color'); 
    }, 

    function() { 
        $(this).removeClass('color'); 
    } 
); 

/* CSS Style */ 
.color { 
    background-color:#f00;   

/* HTML */ 
<ul id="list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul>

 

9、盒模型Hack(Box Hack Model)

這是IE裡最熱門的bug了。基本的理解是,IE計算寬度(width)的方式不同。基於w3c標准,一個元素總寬度應該是:
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是,IE計算寬度時沒有加上填充和邊框:
總寬度 = margin-left + width + margin-right

更多的細節,請參考這個鏈接:Internet Explorer和CSS盒模型詳細解釋

解決方法:

使用w3c的標准兼容模式。IE6或者之後的版本能基於w3c的標准計算,但是你仍舊會在IE5中遇到問題。

或者你可以用CSS Hack來解決這個問題。所有標准兼容的浏覽器都能讀取w\\idth:180px 除了IE5。

 

#content { 
    padding:10px; 
    border:1px solid; 
    width:200px; 
    w\\idth:180px; 
}

 

10、 雙倍邊距bug(Double Margin Bug Fix)

如果你有一個分配有左/右邊距的浮動元素,IE6會使得邊距雙倍化。比如,margin-left:5px 將會變成10px。你可以通過對浮動元素添加display:inline來解決這個問題。

解決方法

 

div#content { 
    float:left; 
    width:200px; 
    margin-left:10px; 

    /* fix the double margin error */ 
    display:inline; 
}

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