margin设置负值在ie6中不起作用问题

我们经常需要做如上图所示这样的效果，这时就要设置margin-top和margin-bottom为负数。但是在ie6中显示不正常，如下图所示，其余浏览器均正常。
（ie6中表现，上方部分被隐藏掉。margin为负数没有起作用）

此例子中，大体结构是：li标签设置左浮动，然后ul设置clearfix清除浮动。在ie6中出现这种bug的原因不详。经过尝试，解决方法是：在li的当前状态的样式中加上：position:relative。

后来做了一个很简单的例子进行分析，发现ie6是支持margin为负数值的，但是上面的情况没有起作用，分析原因应该是设置了某样式影响了ie6。
ff等其他浏览器和ie6的对比情况如下：ie6中右侧灰色框超出红线的部分被隐藏了。


大体代码如下：
<div style="margin-top:50px; border:1px solid #F00; width:400px;" class="clearfix">
  <div style="border:1px solid #933; width:200px; height:100px;float:left;"></div>
  <div style="border:1px solid #ccc; width:200px; height:100px; margin:-30px 0 0 -5px;float:left;"></div>
</div>
.clearfix:after {clear: both;content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}
但是，很奇怪的是，如果把最外层的样式clearfix去掉，再把width:400px去掉，ie6中margin设为负值的部分就恢复正常了。但是由于外层没有清除浮动导致border撑不开高度。
同样，如果最外层div样式中没有width:400px;而是设置height:100px;也是相同的情况。猜测是外层div设置宽和高影响了ie6。
但是内层有浮动，外层如果不清除的话会带来很多问题，比如设置border会有影响，撑不开高度。还有，很多情况我们是需要给外层设置高度和宽度的。所以使用去除宽高度和clearfix的方法。
建议还是在出现问题的层使用position:relative来解决ie6的bug。

 

在ie6中设置margin负值后，需要添加position:relative来解决负值被隐藏问题