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

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

图片：

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

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

图片：

奇迹啊，真的没有了耶！我想说：奇迹个毛！仔细看看圈中的文字位置，是不是发生了变化，明显与左边有间距。再看看在ie7下的效果，

文字是居左的，紧贴左边。也就是说，就算你不加高度，这个3px 的bug在ie6下也是存在的！只不过是外表蒙蔽了我们的双眼

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

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

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-31/75.html

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