在IE6中使用了float浮动元素导致margin产生双边距的解决方法

使用CSS+DIV制作网页的时候，由于目前浏览器太多，每个浏览器都有不同的CSS的BUG问题，其中IE浏览器特别多，加上用户总坚持着老版本不放，也加重了网页设计师的麻烦。float浮动之后margin产生双边距便是IE6中很明显的BUG。

什么是双边距？

先看以下CSS代码：

#neirong{float:left;width:250px;height:250px;margin:10px;}

表示宽高为250像素的DIV左浮动，上右下左的边距margin为10像素。在其它浏览器中会如实显示，但在IE6中，左边距会变成20像素。这便是双边距。

产生的条件。

对于IE6下的双边距bug我们需要知道的是并不是所有的margin边距方向都会产生双边距，出现双边距的条件是当float浮动元素的浮动方向和margin边距的方向一致时才会出现。如上面的例子，元素向左浮动，而其中只有左边距才产生了双边距。此外，同一行中如果有多个浮动元素，只有第一个浮动元素会出现双边距bug，其它的浮动元素则不会。

如CSS样式如下：

#neirong{float:left;width:250px;height:250px;margin:10px;}
#neirong2{float:left;width:250px;height:250px;margin:10px;}
#neirong3{float:left;width:250px;height:250px;margin:10px;}

其中只有id="neirong"才会产生双边距。

IE6双边距bug解决方法：

解决方法很简单，只需要给第一个浮动元素的css属性加上display:inline;属性就可以了。

#neirong{float:left;width:250px;height:250px;margin:10px;display:inline;}