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

时间:2009年08月19日作者:愚人码头查看次数:7,456 views评论次数:15

还真不知道这个题目这么写,暂时就用这个吧。

今天同事给我看了一个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下如图

2009-08-19_192458

其他浏览器如图:

2009-08-19_192652

这个问题真是让人郁闷,感谢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>

如果你也有解决方案,欢迎分享。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【IE6的疯狂之十二】一个display:none引起的3像素的BUG

如果你读了我的文章,觉得有帮助: 说明
标签:分类:html+css
9条评论
  1. ytzong留言于:2009年08月20日11:29

    这个应该归到 float 3px bug 里吧
    经典的解决方法是 float 的元素同时 _display:inline

    [回复]

  2. 愚人码头留言于:2009年08月20日11:57

    谢谢楼上的ytzong

    [回复]

  3. xuf22留言于:2010年01月21日17:16

    IE8里也有这个问题,不过是2px

    [回复]

  4. 小曹留言于:2010年08月21日18:07

    博主好!!!
    刚看了你这个问题,我找到了三种解决问题的方法。

    解决方法一:

    在第一行的div中加上display:inline;

    解决方法二:

    就是你提到的,在最后一行div加上margin-right:-3px;

    解决方法三:

    也是很让人摸不着头脑的解决方法,如果博主知道的话还麻烦跟我说一下

    在最后一行的div中加入任意的行内元素
    比如:注释

    暂时想到这些
    ie6浮动方面的bug还真多

    博主 你尝试在最后div中输入一个字母 或打一个空格 你会发现 出现重复文字了啊 在所有浮动div的下方 好奇怪 好奇怪!

    [回复]

  5. 小曹留言于:2010年08月21日18:10

    博主 怎么不让我输入html标记
    我的第三种方法 除了注释 还可以是段落标记 换行符 span元素 斜体标记等等

    博主知道的话 还请告诉我的

    我的QQ;892433568

    我是一个步入css之路的初学者,很多不明白的,还请多多指教

    [回复]

  6. peizhiwei留言于:2010年10月27日16:33

    我研究了一下,一共有五种解决方案:除了博主的方法和5档小曹的方法 我还发现2种解决办法现在总结出来:

    解决方案1:将最后一个div加一个margin-right:-3px;
    解决方案2:将display: none的div换成:visibility:hidden
    解决方案3:将第一个div加上一个属性:display:inline;
    解决方案4:将原display: none的这个div的所有属性拿掉不拿也行,在div中输入2个任意字符至少2个;
    解决方案5:将原display: none的这个div设置样式成:float:left; font-size:0px; height:0px; width:0px; line-height:0px;

    经测试这5种方法均能达到效果,都是针对IE6, 说实话真不知道这IE6浏览器是如何开发出来的,出现着各种各样的错误,令人百思不得其解 杯具……

    [回复]

  7. 小吉猪留言于:2011年05月31日16:06

    你好,我是CSS新手,请问一下在这个布局中那个隐藏的DIV有什么作用?

    [回复]

    uiblog.cn 回复于:

    @小吉猪, 在此例中,貌似你不大明白他的用处,想想input hidden。

    [回复]

  8. 萝莉留言于:2012年01月04日16:56

    我在IE8下看的效果和IE6下居然一样,太囧了

    [回复]

  9. 萝莉留言于:2012年01月04日16:57

    IE真的没法整,不同电脑的IE8效果也不同。。。

    [回复]

发表评论

*

*