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一样显示在一行了。