http://www.css88.com/archives/1797
还真不知道这个题目这么写，暂时就用这个吧。
今天同事给我看了一个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> </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>
如果你也有解决方案，欢迎分享。
5 条评论
这个应该归到 float 3px bug 里吧
经典的解决方法是 float 的元素同时 _display:inline
谢谢楼上的ytzong
IE8里也有这个问题，不过是2px
博主好！！！
刚看了你这个问题，我找到了三种解决问题的方法。
解决方法一：
在第一行的div中加上display：inline;
解决方法二：
就是你提到的，在最后一行div加上margin-right:-3px;
解决方法三：
也是很让人摸不着头脑的解决方法，如果博主知道的话还麻烦跟我说一下
在最后一行的div中加入任意的行内元素
比如：注释
暂时想到这些
ie6浮动方面的bug还真多
博主 你尝试在最后div中输入一个字母 或打一个空格 你会发现 出现重复文字了啊 在所有浮动div的下方 好奇怪 好奇怪！
博主 怎么不让我输入html标记
我的第三种方法 除了注释 还可以是段落标记 换行符 span元素 斜体标记等等
博主知道的话 还请告诉我的
我的QQ;892433568
我是一个步入css之路的初学者，很多不明白的，还请多多指教
一 个引用通告
[...] 【IE6的疯狂之十二】一个display:none引起的3像素的BUG：http://www.css88.com/archives/1797 [...]