IE6传说中的3px BUG

 

万恶的IE6 

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

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

Html代码  

1. <style type="text/css">  
2. <!--  
3.   
4. #left {  
5.  background-color: #E8F5FE;  
6.  border: 1px solid #A9C9E2;  
7.  float: left;  
8.  height: 300px;  
9.  width: 200px;  
10. }  
11. #right {  
12.  background-color: #F2FDDB;  
13.  border: 1px solid #A5CF3D;  
14.  height: 300px;  
15. }  
16.   
17. -->  
18. </style>  
19. <div id="left">左列</div>  
20. <div id="right">右列</div>  

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

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

Html代码  

1. #left {  
2.  background-color: #E8F5FE;  
3.  border: 1px solid #A9C9E2;  
4.  float: left;  
5.  height: 300px;  
6.  width: 200px;  
7. _margin-right:-3px;  
8. }  

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