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

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

代码:

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

这个是有在ie6下如图

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

其他浏览器如图:

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

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

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

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

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

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

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