5、  深入標(biāo)準(zhǔn)  ~  The IE Doubled Float-Margin Bug(IE雙倍浮動(dòng)邊界Bug)
什么發(fā)生故障？

一段無錯(cuò)的代碼把一個(gè)居左浮動(dòng)(float:left)的元素放置進(jìn)一個(gè)容器盒(box)，并在浮動(dòng)元素上使用了左邊界(margin-left)來令它和容器的左邊產(chǎn)生一段距離?？雌饋硐喈?dāng)?shù)暮唵?，對嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動(dòng)元素的邊界長度被神秘地翻了一倍！

情況應(yīng)該如何？

下面的圖釋展示了一個(gè)簡單的div(茶色的盒子)包含著一個(gè)居左浮動(dòng)的div(綠色的盒子)。浮動(dòng)元素有一個(gè)100px的左邊界，使容器盒與它的左邊緣之間產(chǎn)生了一個(gè)100px的間隙。到現(xiàn)在為止，一直都還不錯(cuò)。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陳舊的IE“雙倍占據(jù)”

原樣的相同代碼被在IE/Win中瀏覽時(shí)以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。

這為什么會發(fā)生？別問這種傻問題！這就是IE，記得嗎？符合標(biāo)準(zhǔn)只是理想的狀況，不指望實(shí)現(xiàn)，這個(gè)簡單的事實(shí)正驗(yàn)證了。

重點(diǎn)

這個(gè)Bug僅當(dāng)浮動(dòng)邊界和浮動(dòng)元素的方向相同時(shí)出現(xiàn)在浮動(dòng)元素和容器盒的內(nèi)邊緣之間，在這之后的任意有著相似邊界的浮動(dòng)元素不會呈現(xiàn)雙倍邊界。只有特定的浮動(dòng)行的第一個(gè)浮動(dòng)元素會遭遇這個(gè)Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。

最后，修復(fù)辦法！

直到現(xiàn)在(04年1月)這個(gè)Bug一直被認(rèn)為是無法修復(fù)的，通常用來替代錯(cuò)誤的邊界的控制方法如：一個(gè)不可視浮動(dòng)元素的左邊距，連同一個(gè)內(nèi)嵌的盒子一起，可視的盒子裝在不可視浮動(dòng)元素里；或者使用技巧僅對IE/Win設(shè)定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過現(xiàn)在全部結(jié)束了。

Steve Clason發(fā)現(xiàn)了一個(gè)修復(fù)辦法，描述在他的Guest Demo里，修復(fù)了雙倍邊界和圍繞文字縮進(jìn)Bug。這是一個(gè)經(jīng)典的IE的Bug修復(fù)辦法，使用一個(gè)屬性來修復(fù)影響不相關(guān)屬性的Bug。

現(xiàn)在如何來做？

研究它，簡單地將{display: inline;}設(shè)置給浮動(dòng)元素就是全部所需做的！是的，聽起來太簡單了，不是嗎？不過這是真的，僅僅一個(gè)display的"inline"聲明已經(jīng)能夠勝任了。

熟悉規(guī)則的人知道浮動(dòng)元素自動(dòng)設(shè)置為"block"元素，而不管他們之前是什么。就如Steve從W3C里指出：

9.5.1 Positioning the float: the 'float' property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

這說明浮動(dòng)元素上的{display: inline;}會被忽略，事實(shí)上所有的瀏覽器沒有呈現(xiàn)任何改變，包括IE。但是，它不知何故讓IE停止將浮動(dòng)元素的邊界翻倍。因而，這個(gè)修復(fù)辦法可以被直接應(yīng)用，而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個(gè)修復(fù)辦法抱恙，只要把這個(gè)修復(fù)裝入IE獨(dú)用的Tan Hack里，細(xì)節(jié)如同IE Three Pixel Text-Jog Demo。

下面是兩個(gè)使用了前面相同代碼的生動(dòng)演示，第一個(gè)照常顯示了IE的Bug，下一個(gè)對浮動(dòng)元素使用了"inline"修復(fù)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

最新評論