IE的雙邊距Bug以及解決辦法

display:inline和display:block區別

一、什么是雙邊距Bug？

先來看圖：

我們要讓綠色盒模型在藍色盒模型之內向左浮動，並且距藍色盒模型左側100像素。這個例子很常見，比如在網頁布局中，側邊欄靠左側內容欄浮動，並且要留出內容欄的寬度。要實現這樣的效果，我們給綠色盒模型應用以下CSS屬性：

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

復制代碼

很簡單，對吧？但是當我們在IE6中查看時，會發現左側外邊距100像素，被擴大到200個像素。如下圖：

二、怎么會這樣？

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

三、如何修正這個Bug？

很簡單，只需要給浮動元素加上display:inline;這樣的CSS屬性就可以了。就這么簡單？對，就這么簡單。如下圖：

CSS代碼如下：

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

復制代碼

display屬性的inline和block inline是內聯元素,block是塊級元素

它可以讓行內顯示為塊的元素，變為行內顯示，例如

1. <div> DIV1 </div>
   
2. <div> DIV2 </div>

復制代碼

這里DIV1和DIV2分別占一行，但是你給他們加上屬性后變了

1. <div   style= "display:inline "> DIV1 </div>
2. <div   style= "display:inline "> DIV2 </div>

復制代碼

DIV1 和DIV2這時候顯示在同一行了 和   display:inline   對應的是   display:block，block   會讓應用了該   CSS   屬性的   HTML   標記變成塊級別元素，例如   SPAN   是行內顯示的，但是你加了   display:block   屬性就不一樣了

1. <span   style= "display:block "> SPAN1 </span>
2. <span   style= "display:block "> SPAN2 </span>

復制代碼

display:inline 比較經典的用法是用在 <ul> 下的 <li> 中內聯block一般一個塊占一行，除非floatinline是自動排為一行，就象段內的文字一樣，可成為多行。display:inline   的作用是設置對象做為行內元素顯示，     inline是內聯對象的默認值（ps:內聯對象就是不自動產生換行的元素，比如span）      而我們一般用的div是塊級元素，默認display屬性是block,      但將div的display設置為inline的話，則多個div可以象span一樣顯示在一行了。