網(wǎng)頁前端IE-BUG系列-3像素縫隙錯誤，也稱文本慢跑錯誤
受影響的IE版本
IE6
癥狀
緊接浮動元素的元素或者與浮動元素之間會有3像素的縫隙，或者會位于浮動元素下面，或者會在有數(shù)個浮動元素時保持這個3像素的偏移。
說明
這是一個頗為有趣的bug.在IE中haslayout屬性為true的元素在浮動元素周圍在不同情況下會有不同的表現(xiàn)。他們不愿屈居浮動元素之下，甚至都不愿觸碰到浮動元素。實際上，為元素賦予’layout’是IE使其能包含浮動元素的方式。然而，這個bug有三種呈現(xiàn)方式。下面是demo:
BUG DEMO
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;
}
我們一個個地分析這些demo。第一個demo中有三個元素：固定寬度的#container，它里面的浮動元素#bugger和另一個元素#victim,其左margin設(shè)置為#bugger元素的寬度。盡管你可能不會在專業(yè)代碼中看到這些，但由于可以說為第二個孩子結(jié)點#victim設(shè)置寬度沒有任何用處，而也正是這一點使這個bug更加突出,即添加寬度后#victim就位于浮動元素之下了。如果沒有#victim{width:200px;},而haslayout仍為true,這個bug的呈現(xiàn)方式將是#victim和#bugger之間的3像素的縫隙，這可以從第二個demo也就是#container2看出來。最終，如果緊鄰浮動元素的元素沒有’layout’,這個bug將無從察覺。第三個demo,即#container3顯示了這個效果。#victim3中的文本仍然偏移了3px,這說明這個bug會影響由文本，圖像和類似元素產(chǎn)生的inline盒子，這個bug也因此而另外得名”Text jog Bug”.在第三個demo中，這個bug可能還沒有這么明顯。然而，如果用200px寬的圖像替換文本，它會如同我們在第一個demo中看到的一樣沉下去?？纯醋詈笠粋€demo，即#container4,很明顯，就算將左浮動float:left改為右浮動float:right,這個bug依然存在。
解決方案
以下是按解決方案類型排列的解決方案：
條件注釋方案
修復(fù)版本
所有受影響的版本
描述
盡管這個bug的修復(fù)有些像虎口奪食的情景，“把我的那塊還給我”，但它真的很有效。
大家也注意到了，這些demo中的所有縫隙都是整整3px,這也是我們在修復(fù)中將要加以利用的，這些修復(fù)方法會隨這個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;
}
條件注釋：
<!--[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]-->
上面的代碼除了條件注釋，與原始demo中的代碼一樣。條件注釋會應(yīng)用于所有低于IE7的IE版本匹配，它們也正是這個bug所影響的版本。
這個解決方案包含應(yīng)用一個-3px到浮動元素上bug出現(xiàn)的那一邊的margin。所以根據(jù)其float值，頭三個demo中我們使用了margin-left,而最后一個demo我們使用了margin-right。
在我們的demo中使用的margin值為-3px的原因不是因為3的神奇而是因為其原始值為0.而需要傳遞給低于7的IE版本的值是比原始值小3.所以，如果我們已經(jīng)在第一個demo中使用了#bugger{margin-right:30px}，我們應(yīng)當(dāng)在條件注釋中使用#bugger{margin-right:27px}
修復(fù)方案的第二個部分,需要將#victim,#victim2和#victim4的margin設(shè)置為0.為什么呢，由于IE處理浮動元素周圍有l(wèi)ayout的元素的方式，從而在IE中，#victim , #victim2 , #victim4的margin將從#bugger的邊沿開始而不是位于其下（在正常的瀏覽器中會沉下）。
#victim3上的margin并沒有設(shè)置為0，因為它并沒有’layout’,從而它會位于浮動元素下面。
本文地址：http://m.likemindfilms.com/tutorial/wd1420.html
