5、  深入標準  ~  The IE Doubled Float-Margin Bug(IE雙倍浮動邊界Bug)
什么發(fā)生故障？

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

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

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

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

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

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

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

重點

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

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

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

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

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

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

熟悉規(guī)則的人知道浮動元素自動設(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. "

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

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

最新評論