5、深入標准~TheIEDoubledFloat-MarginBug(IE雙倍浮動邊界Bug)
什麼發生故障?
一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box),並在浮動元素上使用了左邊界(margin-left)來令它和容器的左邊產生一段距離。看起來相當的簡單,對嗎?但直至它被在IE/Win中浏覽為止,在浏覽器中居左浮動元素的邊界長度被神秘地翻了一倍!
情況應該如何?
下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界,使容器盒與它的左邊緣之間產生了一個100px的間隙。到現在為止,一直都還不錯。
- .floatbox{
- float:left;
- width:150px;
- height:150px;
- margin:5px05px100px;
- /*ThislastvalueapplIEsthe100pxleftmargin*/
- }