IEBug之雙邊距bug

  1、什麼是雙邊距Bug？

先來看圖：

咱們要讓綠色盒模型在藍色盒模型以內向左浮動，而且距藍色盒模型左側100像素。

這個例子很常見，好比在網頁佈局中，側邊欄靠左側內容欄浮動，而且要留出內容欄的寬度。要實現這樣的效果，咱們給綠色盒模型應用如下CSS屬性：

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*外邊距的最後一個值保證了100像素的距離*/
}

當在IE6中查看時，會發現左側外邊距100像素，被擴大到200個像素。以下圖：

2、雙邊距Bug的緣由？

這個緣由還真是不清楚，但這樣的結果確確實實在IE6中出現了。並且這種狀況是在浮動元素的浮動方向和浮動邊界的方向一致時纔會出現。如同上面的例子同樣，元素向左浮動而且設置了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動而且設置右邊距也會出現一樣的狀況。同一行若是有多個浮動元素，第一個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。

3、如何修正此Bug？

給浮動元素加上display:inline。以下圖：

CSS代碼以下：

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