網(wǎng)頁(yè)前端IE-BUG系列-3像素縫隙錯(cuò)誤，也稱(chēng)文本慢跑錯(cuò)誤

2013/3/17 16:15:53來(lái)源：前端翻譯小站

受影響的IE版本

IE6

癥狀

緊接浮動(dòng)元素的元素或者與浮動(dòng)元素之間會(huì)有3像素的縫隙，或者會(huì)位于浮動(dòng)元素下面，或者會(huì)在有數(shù)個(gè)浮動(dòng)元素時(shí)保持這個(gè)3像素的偏移。

說(shuō)明

這是一個(gè)頗為有趣的bug.在IE中haslayout屬性為true的元素在浮動(dòng)元素周?chē)诓煌闆r下會(huì)有不同的表現(xiàn)。他們不愿屈居浮動(dòng)元素之下，甚至都不愿觸碰到浮動(dòng)元素。實(shí)際上，為元素賦予’layout’是IE使其能包含浮動(dòng)元素的方式。然而，這個(gè)bug有三種呈現(xiàn)方式。下面是demo:

BUG DEMO

點(diǎn)擊查看

HTML Code:

		<div id="container">
    <div id="bugger">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim">*cry*</div>
</div>

<div id="container2">
    <div id="bugger2">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim2">*cry*</div>
</div>

<div id="container3">
    <div id="bugger3">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim3">*cry*</div>
</div>
<div id="container4">
    <div id="bugger4">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim4">*cry*</div>
</div>

CSS Code:

		#container,
#container2,
#container3,
#container4 {
    width: 500px;
    overflow: hidden; /* just containing floats */

}
    #bugger,
    #bugger2,
    #bugger3 {
        float: left;
        width: 300px;
        background: #65A5E1;
    }
    #bugger3 {
        background: none;
        border-right: 1px solid #000;
    }
    #victim {
        width: 200px;
        margin-left: 300px;
    }
    #victim2 {
        height: 1.5em; /* just to give "layout" */
        margin-left: 300px;
    }
    #bugger4 {
        float: right;
        width: 300px;
    }
    #victim4 {
        width: 200px;
        margin-right: 300px;
    }

我們一個(gè)個(gè)地分析這些demo。第一個(gè)demo中有三個(gè)元素：固定寬度的#container，它里面的浮動(dòng)元素#bugger和另一個(gè)元素#victim,其左margin設(shè)置為#bugger元素的寬度。盡管你可能不會(huì)在專(zhuān)業(yè)代碼中看到這些，但由于可以說(shuō)為第二個(gè)孩子結(jié)點(diǎn)#victim設(shè)置寬度沒(méi)有任何用處，而也正是這一點(diǎn)使這個(gè)bug更加突出,即添加寬度后#victim就位于浮動(dòng)元素之下了。如果沒(méi)有#victim{width:200px;},而haslayout仍為true,這個(gè)bug的呈現(xiàn)方式將是#victim和#bugger之間的3像素的縫隙，這可以從第二個(gè)demo也就是#container2看出來(lái)。最終，如果緊鄰浮動(dòng)元素的元素沒(méi)有’layout’,這個(gè)bug將無(wú)從察覺(jué)。第三個(gè)demo,即#container3顯示了這個(gè)效果。#victim3中的文本仍然偏移了3px,這說(shuō)明這個(gè)bug會(huì)影響由文本，圖像和類(lèi)似元素產(chǎn)生的inline盒子，這個(gè)bug也因此而另外得名”Text jog Bug”.在第三個(gè)demo中，這個(gè)bug可能還沒(méi)有這么明顯。然而，如果用200px寬的圖像替換文本，它會(huì)如同我們?cè)诘谝粋€(gè)demo中看到的一樣沉下去?？纯醋詈笠粋€(gè)demo，即#container4,很明顯，就算將左浮動(dòng)float:left改為右浮動(dòng)float:right,這個(gè)bug依然存在。

解決方案

以下是按解決方案類(lèi)型排列的解決方案：

條件注釋方案

修復(fù)版本

所有受影響的版本

描述

盡管這個(gè)bug的修復(fù)有些像虎口奪食的情景，“把我的那塊還給我”，但它真的很有效。

大家也注意到了，這些demo中的所有縫隙都是整整3px,這也是我們?cè)谛迯?fù)中將要加以利用的，這些修復(fù)方法會(huì)隨這個(gè)bug的呈現(xiàn)方式而有些微小的改變。

HTML Code:

		<div id="container">
    <div id="bugger">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim">*cry*</div>
</div>

<div id="container2">
    <div id="bugger2">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim2">*cry*</div>
</div>

<div id="container3">
    <div id="bugger3">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim3">*cry*</div>
</div>
<div id="container4">
    <div id="bugger4">
        Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit.
    </div>
    <div id="victim4">*cry*</div>
</div>

CSS Code:

		#container,
#container2,
#container3,
#container4 {
    width: 500px;
    overflow: hidden; /* just containing floats */

}
    #bugger,
    #bugger2,
    #bugger3 {
        float: left;
        width: 300px;
        background: #65A5E1;
    }
    #bugger3 {
        background: none;
        border-right: 1px solid #000;
    }
    #victim {
        width: 200px;
        margin-left: 300px;
    }
    #victim2 {
        height: 1.5em; /* just to give "layout" */
        margin-left: 300px;
    }
    #bugger4 {
        float: right;
        width: 300px;
    }
    #victim4 {
        width: 200px;
        margin-right: 300px;
    }

條件注釋?zhuān)?/p>

		<!--[if lt IE 7]>
        <style type="text/css">
            #bugger,
            #bugger2,
            #bugger3 { margin-right: -3px; }

            #bugger4 { margin-left: -3px; }

            #victim,
            #victim2 { margin-left: 0; }

            #victim4 { margin-right: 0; }
        </style>
    <![endif]-->

上面的代碼除了條件注釋?zhuān)c原始demo中的代碼一樣。條件注釋會(huì)應(yīng)用于所有低于IE7的IE版本匹配，它們也正是這個(gè)bug所影響的版本。

這個(gè)解決方案包含應(yīng)用一個(gè)-3px到浮動(dòng)元素上bug出現(xiàn)的那一邊的margin。所以根據(jù)其float值，頭三個(gè)demo中我們使用了margin-left,而最后一個(gè)demo我們使用了margin-right。

在我們的demo中使用的margin值為-3px的原因不是因?yàn)?的神奇而是因?yàn)槠湓贾禐?.而需要傳遞給低于7的IE版本的值是比原始值小3.所以，如果我們已經(jīng)在第一個(gè)demo中使用了#bugger{margin-right:30px}，我們應(yīng)當(dāng)在條件注釋中使用#bugger{margin-right:27px}

修復(fù)方案的第二個(gè)部分,需要將#victim,#victim2和#victim4的margin設(shè)置為0.為什么呢，由于IE處理浮動(dòng)元素周?chē)衛(wèi)ayout的元素的方式，從而在IE中，#victim , #victim2 , #victim4的margin將從#bugger的邊沿開(kāi)始而不是位于其下（在正常的瀏覽器中會(huì)沉下）。

#victim3上的margin并沒(méi)有設(shè)置為0，因?yàn)樗](méi)有’layout’,從而它會(huì)位于浮動(dòng)元素下面。

原文鏈接： http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug