<li id="kqymy"></li>

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

10個常見的IEbug和解決方法_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 15:56:29

10個常見的IEbug和解決方法_html/css_WEB-ITnose

10個常見的IEbug和解決方法_html/css_WEB-ITnose:1、IE6 幽靈文本(Ghost Text bug) 在我寫本文之前，我遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重復的文本，被IE6顯示在靠近原文本的下面。(譯注：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它，所以

推薦度：

點擊下載本文 文檔為doc格式

導讀10個常見的IEbug和解決方法_html/css_WEB-ITnose:1、IE6 幽靈文本(Ghost Text bug) 在我寫本文之前，我遇到了這個bug。它相當的古怪和滑稽。一塊不知哪來的重復的文本，被IE6顯示在靠近原文本的下面。(譯注：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它，所以

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

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

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

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

解決方法：

使用標簽包圍注釋
移除注釋
在前浮動上增加樣式 {display:inline;}
在適當的浮動的div上使用負邊距
在原文本增加額外的 (比如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 */

/* in the iframe docuement, in this case content.html */
body {

}

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

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

html {
overflow: auto;
}

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

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

解決方法：

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

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

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

/* CSS Style */
.color {

}

/* HTML */

Item 1

Item 2

Item 3

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;
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com