IE6传说中的3px BUG

 

万恶的IE6 

今天遇到了IE6传说中的3px BUG： 

当左边的DIV浮动(float:left)起来后，右边的DIV就可以接着排过去，形成典型的一列固定，第二列自适应的布局。 
其实很简单，但是IE6就是...... 
看实例： 

<style type="text/css">
<!--

#left {
 background-color: #E8F5FE;
 border: 1px solid #A9C9E2;
 float: left;
 height: 300px;
 width: 200px;
}
#right {
 background-color: #F2FDDB;
 border: 1px solid #A5CF3D;
 height: 300px;
}

-->
</style>
<div id="left">左列</div>
<div id="right">右列</div>

以上代码，其他浏览器都没有任何问题。 
但在IE6中你会发现两个DIV中间出现了一条3px的间隙。 

无奈，GOOGLE了一阵，貌似只能给IE6加HACK解决了。 

#left {
 background-color: #E8F5FE;
 border: 1px solid #A9C9E2;
 float: left;
 height: 300px;
 width: 200px;
_margin-right:-3px;
}

_margin-right:-3px; 
因为下划线开头的CSS属性，只有IE6才认得。。。