ie6下display:none的BUG

display:none引起的3像素的BUG，如果你也有解決方案，歡迎分享。

今天同事給我看了一個display:none引起的3像素的BUG，非常奇怪！從來沒碰到過display:none還能引起這種bug。

看代碼：

 

  
<div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  
<div style="background:green; width:10px; float:left; height:300px;"></div>   
  
<div style="background:red; float:left; height:300px; width:280px;"></div>   
  
<div style="display: none; "></div>   
  
<div style="background:green; width:10px; float:left; height:300px;"></div>   
  
</div> 
 

這個是有在ie6下如圖

 

其他瀏覽器如圖：

這個問題真是讓人鬱悶，感謝greengnn和廣州♂鋒提供的解決方案：

解決方案1：將最後一個div加一個margin-right:-3px；即

 

  
<div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  
<div style="background:green; width:10px; float:left; height:300px;"></div>   
  
<div style="background:red; float:left; height:300px; width:280px;"></div>   
  
<div style="display: none; "></div>   
  
<div style="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>  
 

解決方案2：將display: none的div換一個形式隱藏：即
 

 

  
<div style="width:100px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  
<div style="background:green; width:10px; float:left; height:100px;"></div>   
  
<div style="background:red; float:left; height:100px; width:80px;"></div>   
  
<div style="position:absolute; visibility: hidden "></div>   
  
<div style="background:green; width:10px; float:left; height:100px; margin-right:-3px"></div>   
  
</div> 
 

如果你也有解決方案，歡迎分享。