IE7 - 保证金：自动影响兄弟元素

Question

奇怪的IE7错误，我不知道......

继承人HTML：

<header>
    <div class='header-overlay'>
        <div class='header-overlay-content'>
                 <ul>
                     <li>Contact Us</li>  
                     <li>FAQs</li>          
                 </ul>
            </div>
    </div>
    <div class="nav"></div>
</header>

适用的CSS：

header {
    background: url('img/header-background.jpg') center no-repeat; 
    height: 325px;
    width:100%;
}

.header-overlay {
    height: 70px;
    width: 100%;
    position: absolute;
    background-color: #fff;
}

.header-overlay-content {
    height: 100%;
    width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px solid red;
}

.nav {
    background: url('img/main-nav-blank.png') no-repeat;
    width: 1000px;
    height: 57px;
    position: relative;
    top: 235px;

    margin: 0 auto;   /* this causes problems! */   
 }

基本上，标题叠加应该占据顶部的整页宽度（因此宽度：100％），导航是一个水平居中于其下方几百个像素的条形图。除了作为标题中的兄弟元素之外，它们没有任何关系，但是IE7将它们呈现为：

标题叠加被推送的数量与导航的数量相同 - 对我来说完全不明白为什么会发生这种情况，并且它不会出现在任何其他浏览器中，包括IE8 ......帮助，请？！

Answer 1

添加此css

.header-overlay {
    height: 70px;
    width: 100%;
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 0;
}

绝对div认为它应该从内容开始开始，因为你拥有的唯一内容是导航，所以它感到困惑