IE6中display为none时仍占据3px？？？

当要在网页上要隐藏一个DIV的时候，我们立马想到设置display:none就能搞定。设置了一个DIV的display为none时，该DIV就从网页上消失了，也不占用空间。

但在做项目的时候偶然发现了一个奇怪的现象，IE6下某些时候设置DIV的display:noe，该DIV依然占据一定空间。这里首先来重现一下这个奇怪的现象：

1，我需要如上图所示的一个HTML结构：

<div class="box clear">
  <div class="list">box1</div>
  <div class="list">box2</div>
  <div class="list">box3</div>
  <div class="list">box4</div>
</div>

对应的CSS： 

.box {
	width: 440px;
	background: #0CF;
	padding: 5px;
}
.list {
	width: 98px;
	height: 98px;
	margin: 5px;
	border: 1px solid #960;
	float: left;
	display:inline;/*IE6 bug*/
}
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
}
.clear {
	zoom: 1;
}
</style>

2，某天我需要在HTML中再加入一个<div class="list">box5</div>，与此同时需要隐藏其中一项

<div class="box clear">
  <div class="list">box1</div>
  <div class="list">box2</div>
  <div class="hide">box3</div>
  <div class="list">box4</div>
  <div class="list">box5</div>
</div>

CSS中添加了一个hide类

.hide{ display:none;}

显示效果在理想状态下应该把添加了hide类的DIV隐藏，后面的自动补全该位置：

但该HTML结构在IE6下box5并没有自动靠近box4，如下图所示：

3，由于该结构中<div class="list">box</div>都设置了float:left，而在设置浮动的情况下只有外层box宽度不够的时候才会发生这种现象，于是把 .box的width设为443px，这时候box5浮动到box4的右侧了。

可是根据前面css中.list的计算，.box宽度为440是刚好相等的。但是可以发现，IE6中把某一项设置为display:none后，存在一个3px的占位。

到底是不是被设为display:none的DIV元素存在3px占位呢？我们来把最后一个DIV设为display:none看看

<div class="box clear">
  <div class="list">box1</div>
  <div class="list">box2</div>
  <div class="list">box3</div>
  <div class="list">box4</div>
  <div class="hide">box5</div>
</div>

 box的宽度依然是440px，显示效果如下：

如果是被设为display:none的DIV元素存在3px占位的话，那么box5也应该存在3px占位，可是这里并没有发生3px占位。经过测试，当把第一个或者最后一个DIV设为display:none时并不会出现3px占位现象。

IE6中3px占位现象的解决方法：给浮动元素设置background-color，貌似很奇葩！

HTML结构：

<div class="box clear">
  <div class="list">box1</div>
  <div class="list">box2</div>
  <div class="list">box3</div>
  <div class="hide">box4</div>
  <div class="list">box5</div>
</div>

CSS样式：

.box {
	width: 440px;
	background: #0CF;
	padding: 5px;
}
.list {
	width: 98px;
	height: 98px;
	margin: 5px;
	border: 1px solid #960;
	float: left;
	display:inline;/*IE6 bug*/
	background:#0CF;/*设置后IE6中3px占位现象消失*/
}
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
}
.clear {
	zoom: 1;
}
.hide{ display:none;}

 修复效果：

 这个不知道算不算IE6的一个bug？