margin负值在IE6/IE7中的一个bug(转)

使用margin负值在IE6/IE7下面有一个小bug–有一部分被隐藏掉了，bug截图如下：详见有此问题的demo

基本html结构如下：

<ul class="box">
    <li>之路的网站--margin负值在IE6/IE7中的bug</li>
    <li>之路的网站--margin负值在IE6/IE7中的bug</li>
    <li>之路的网站--margin负值在IE6/IE7中的bug</li>
    <li>之路的网站--margin负值在IE6/IE7中的bug</li>
    <li>之路的网站--margin负值在IE6/IE7中的bug</li>
</ul>

基本css如下：

.box{width:500px; border:5px solid #003300;; padding:2px 30px;}
.box li{
         border-bottom:6px solid #ff0000; border-top:6px solid #ff0000;
         line-height:30px; margin-bottom:-6px;
       }

解决方法是给li加position:relative; zoom:1;，我的理解是加了之后提高了li的层级，问题就解决了

问题解决后css如下：

.box{width:500px; border:5px solid #003300;; padding:2px 30px;}
.box li{
         border-bottom:6px solid #ff0000; border-top:6px solid #ff0000;
         line-height:30px; margin-bottom:-6px; position:relative; zoom:1;
       }

详见问题解决后的demo

转载于:https://www.cnblogs.com/wangbin/archive/2010/11/22/1883774.html