Question

我有两个堆叠的div，我希望顶部div中的内容流到底部div。在内容包装器上使用负底边距，我能够在除IE 7之外的所有浏览器中实现这一点，而不是流过底部div，内容被它切断/重叠。

我正在寻找对这里究竟发生了什么以及潜在修复的解释。

完整的HTML示例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Negative Margin Test</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

<style type="text/css">

.container {
 width: 800px;
 background: none;
 position:relative; 
}
.container-mid{
 background:#F00;/**/
 border:dashed thick #090;
 width:100%;
}
.container-bottom{
 background:#FF0;/**/
 border:dashed thick #090;
 width:100%;
 height: 200px;
}
.container-inner{
 width:100%;
 margin:0 auto;
 margin-bottom:-200px;/**/

}

</style>

</head>

<body>

<div class="container">


    <div class="container-mid">

        <div class="container-inner">

            <div class="content">       

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>
                <br />
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>
                <br />
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>

            </div><!-- end .content -->

        </div><!-- end .container-inner -->

    </div><!-- end .container-mid -->

    <div class="container-bottom"></div>

  <!-- end .container --></div>


</body>
</html>

在IE8中（与Chrome / FFox /等相同的结果......） alt text

在IE 7中（使用IE8->开发人员工具测试 - ＆gt; IE7模式测试） alt text

如您所见，溢出的内容与黄色div重叠。

查看我的live example

Answer 1

尝试在position:relative;上设置.container-inner，因此它明确具有更高的堆叠顺序，应该将其放在上面。

.container-inner { position:relative; }

我记录了这个错误here。

Answer 2

您可能必须明确设置overflow CSS属性。 IE 7有许多默认值，与大多数浏览器不同。请参阅：http://www.w3schools.com/css/pr_pos_overflow.asp

尝试：

.container-inner{
    width:100%;
    margin:0 auto;
    margin-bottom:-200px;/**/
    overflow: visible;/**/
}

Answer 3

另一种方法是仅使用一个div。将背景设置为黄色，重复x背景为红色，高200像素

.container {
    background: url('red_back.png') repeat-x 0 0 yellow;
    }

为什么IE7中的负边距不起作用？

3 个答案: