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 [...]