ie6下display:none引起的3像素的BUG解决方案

今天WEB前端群(63417830)里的网友给我看了一个display:none引起的错位的问题。

代码:

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

这个是有在ie6下如图

display:none引起的3像素的BUG
 

其他浏览器如图:

2009-08-19_192652

解决方案1:将最后一个div加一个margin-right:-3px;即

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

解决方案2:将display: none的div换一个形式隐藏:即
 

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

注:IE兼容的问题,请用HACK ,请参阅
谈IE浏览器的CSS兼容问题(IE6 IE7 IE8三大浏览器的CSS兼容速查表)

如果你也有解决方案,请加WEB前端群(63417830)进行讨论!

自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com

本文链接地址: ie6下display:none引起的3像素的BUG解决方案 http://www.chhua.com/web-note663

相关笔记

更多