全是 position：relative 惹的祸

今天在做一个人家二次开发过的项目在其他浏览器中没有任何问题，但是在ie6下面简直惨不忍睹，但是仔细调试下来其实主要问题只有两个：

1、浮动问题：

这个已经是老生常谈，经常出现这样那样的错位，其实都是因为浮动没有清除造成的。

解决办法：加clear:both;

2、position:relative

剩下的全是position:relative 惹的祸了。

     i  解决ie6下margin-top负值的bug

       

<div style="width:200px; height:100px; background:#F2BFC8;"></div>
<div style="float:left;">
<div style="width:100px; height:150px; background:#F9B530; margin-top:-50px;"></div>
</div>
<div style="float:left; width:100px; height:100px; background:#E77A77;"></div>

其他浏览器	ie6下(左侧上部被覆盖)

       由于布局的限制，不得不在css上花功夫，本来很简单的一个左右布局硬生生的拆成了右上-左-右下三部分；

       由于左侧与右侧有交错，我用了margin-top:-10px，问题就出来了，ie6下margin这部分内容被外层容器所覆盖，其实是由于外层的float:left; 引起的，根据网上说的必须出发内存的layout，

       解决办法：加position：relative；

    ii  position：relative引起的错位

        这个是因为二次开发过的样式实在是太混乱了，很多地方加了没有必要的position：relative，导致定位的错误。虽然自己写的样式可能不会碰到这种问题，还是要谨记，以后调试的时候可以参考。