【IE6的瘋狂之十二】一個display:none引起的3像素的BUG

日期：2013-11-27  來源：攀枝花惠康網絡公司

還真不知道這個問題問題這么寫，且則就用這個吧。

看代碼：

這個是有在ie6下如圖

其他瀏覽器如圖：

今天同事給我看了一個display:none引起的3像素的BUG，很是奇異！年夜來沒碰著過display:none還能引起這種bug。

這個問題真是讓人郁悶，感謝感動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>

</div>

<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>

解決方案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>

如不美觀你也有解決方案，接待分享。