DIV CSS 佈局教程網

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

這為什麼會發生？別問這種傻問題！這就是IE，記得嗎？符合標准只是理想的狀況，不指望實現，這個簡單的事實正驗證了。

重點

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

最後，修復辦法！

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

SteveClason發現了一個修復辦法，描述在他的GuestDemo裡，修復了雙倍邊界和圍繞文字縮進Bug。這是一個經典的IE的Bug修復辦法，使用一個屬性來修復影響不相關屬性的Bug。

現在如何來做？

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

熟悉規則的人知道浮動元素自動設置為”block”元素，而不管他們之前是什麼。就如Steve從W3C裡指出：

9.5.1Positioningthefloat:the‘float’property

“ThispropertyspecifIEswhetheraboxshouldfloattotheleft,right,ornotatall.Itmaybesetforelementsthatgenerateboxesthatarenotabsolutelypositioned.Thevaluesofthispropertyhavethefollowing
meanings:

left
Theelementgeneratesablockboxthatis
floatedtotheleft.Contentflowsontherightsideofthebox,
startingatthetop(subjecttothe‘clear’property).The‘display’is
ignored,unlessithasthevalue‘none’.

right
Sameas‘left’,butcontentflowsontheleftsideofthebox,startingatthetop.

none
Theboxisnotfloated.“

這說明浮動元素上的{display:
inline;}會被忽略，事實上所有的浏覽器沒有呈現任何改變，包括IE。但是，它不知何故讓IE停止將浮動元素的邊界翻倍。因而，這個修復辦法可以被直接應用，而沒有任何繁瑣的隱藏方法。如果將來的一款浏覽器決定對這個修復辦法抱恙，只要把這個修復裝入IE獨用的TanHack裡，細節如同IEThreePixelText-JogDemo。

下面是兩個使用了前面相同代碼的生動演示，第一個照常顯示了IE的Bug，下一個對浮動元素使用了”inline”修復。

.floatbox{  
float:left;  
width:150px;  
height:150px;  
margin:5px05px100px;  
display:inline;  
}  
 

Update(20060828)：

6、空

#sidebarulli{  
list-style-type:none;  
list-style-image:none;  
margin-bottom:15px;  
}