艺灵设计

全部文章
×

谈谈自己对于ie6下高度导致两个div间有3px这个bug的看法

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-31 16:04:38 - 阅: - 评:0 - 积分:0

也许这个传说中著名的3px bug你早已经知道,但你知道为什么会这样吗?笔者在网上搜了下,解决方法无外乎采用float或margin负边距或overflow等等。吐槽一下:在笔者看来,发现这个bug的人是吃饱了撑的!为什么这样说呢,且听笔者慢慢道来。还是先来看看这个3px bug是怎么回事吧。源码如下:

  1. <div style="width:100%; height:130px; border:1px dashed #999">
  2. <div style="float:left;width:200px;background:red; color:#000;">sdf</div>
  3. <div style="margin-left:200px;background:green;height:100px;color:#000;">sdf</div>
  4. </div>

图片:
3px-bug
图中空白部位就是传说中的那3px bug问题所在,有文章中提出,当后面一个div不设置高度后,这个3px bug就会神奇般的消失了。这是真的吗?还是用图来说话。源码如下:

  1. <div style="width:100%; height:130px; border:1px dashed #999">
  2. <div style="float:left;width:200px;background:red; color:#000;">sdf</div>
  3. <div style="margin-left:200px;background:green;color:#000;">sdf</div>
  4. </div>

图片:
3px-bug2
奇迹啊,真的没有了耶!我想说:奇迹个毛!仔细看看圈中的文字位置,是不是发生了变化,明显与左边有间距。再看看在ie7下的效果,
3px bug
文字是居左的,紧贴左边。也就是说,就算你不加高度,这个3px 的bug在ie6下也是存在的!只不过是外表蒙蔽了我们的双眼

下面再来分析下这个布局。从上述网上摘取的源码中可以看出这是一个两列布局的效果,说到两列布局,我想问下读者会如何用代码实现呢?如果是笔者,那么笔者有3种以上的方法来实现。(①全部左浮②左边的左浮右边的右浮③position定位)我相信没有人会这样只设置左边的左浮,右边的用margin-left:xxpx来实现两列布局吧,说到这里,如果都采用了浮动,那么这个3px 的bug也就不存在了。

在笔者看来,传说中的这个3px bug的问题根本就不是个问题,之所以存在就如同ie6下容器会有默认最小高度一样,解决的办法就是将属性都写全。通常情况下,新手在排版中遇到的各种不兼容各种bug大部分都是因为属性没有写全所致,另外就是一些技巧性问题了。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/div/2013-08-31/75.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: IE6下著名的3px BUG 高度导致3px bug 两个div有3px空隙 ie6 bug

上一篇: 浅谈ie6下容器无法设置1px的高度的原因及解决方法   下一篇: 简易两列布局与三列布局框架模版

评论区