人牛交vide欧美xxxx,欧美色欧美亚洲高清在线视频,欧美日韩亚洲国产精品

QQ 咨詢：361652718 513960520

知識學(xué)堂

·聯(lián)系電話:+86.023-75585550
·聯(lián)系傳真:+86.023-75585550
·24小時手機:13896886023
·QQ 咨詢：361652718 513960520

當(dāng)前位置 > 首頁 > 知識學(xué)堂 > 網(wǎng)站建設(shè)知識

10個常見的IE bug和解決方法

更新時間：2011-12-12 | 發(fā)布人：本站 | 點擊率：962 次

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

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

有很多運動在抗議IE6，支持它的是大多數(shù)web專家和看起來不怎么關(guān)心的普通用戶。所以，我們現(xiàn)在能做什么？我們不得不繼續(xù)挖掘來解決IE6的問題。但是，等一下，有一個振奮人心的消息�；趙3cschool的月度報表，IE6的用戶這些年已經(jīng)減少了一些。從2006年6月的60.3%到現(xiàn)在2009年9月的13.6%。按照這種比例，我們應(yīng)該能在2010年年底的時候放棄IE6(譯注：國外的情況還真是一片大好啊~。~)

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

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

在我寫本文之前，我遇到了這個bug。它相當(dāng)?shù)墓殴趾突Ｒ粔K不知哪來的重復(fù)的文本，被IE6顯示在靠近原文本的下面。(譯注：也可以參看 Explorer 6 Duplicate Characters Bug 獲得bug演示)。我無法解決它，所以我搜索它，果然，這是另一個IE6的bug。

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

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

解決方法：

使用<!—[IF !IE]>標(biāo)簽包圍注釋
移除注釋
在前浮動上增加樣式 {display:inline;}
在適當(dāng)?shù)母拥膁iv上使用負邊距
在原文本增加額外的 (比如10個空格) (hacky way)

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

這個問題我遇到過很多次，當(dāng)時我正在準(zhǔn)備一個JQuery的教程，因為我使用了很多overflow hidden來達到我想要的布局。
問題發(fā)生在當(dāng)父元素的overflow被設(shè)置成hidden并且子元素被設(shè)置成position:relative。
CSS-Trick有一個很好的例子來演示這個bug。position:relative and overflow in internet explorer

解決方法：

為父元素增加position:relative;

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

這很簡單，IE忽略min-height屬性。你可以用下面的hack來修復(fù)它。感謝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不能給你想要的質(zhì)量，你會需要這個對PNG的hack。你必須意識到，如果你使用一張PNG圖像作為背景，你將不能設(shè)置背景的位置。

解決方法：

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

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

在firefox和safari里你應(yīng)該不會遇到這個問題因為默認情況下，iframe的背景被設(shè)置為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)

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

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)的方式不同�；趙3c標(biāo)準(zhǔn)，一個元素總寬度應(yīng)該是：
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是，IE計算寬度時沒有加上填充和邊框：
總寬度 = margin-left + width + margin-right

更多的細節(jié)，請參考這個鏈接：Internet Explorer和CSS盒模型詳細解釋

解決方法：

使用w3c的標(biāo)準(zhǔn)兼容模式。IE6或者之后的版本能基于w3c的標(biāo)準(zhǔn)計算，但是你仍舊會在IE5中遇到問題。

或者你可以用CSS Hack來解決這個問題。所有標(biāo)準(zhǔn)兼容的瀏覽器都能讀取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;
}

分享到：