css - 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! */   
 }

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

header-overlay 的推送量与 nav 的推送量相同 - 让我完全困惑为什么会发生这种情况，并且在任何其他浏览器中都不会发生，包括 IE8 ......请帮助？！

Answer 1

添加这个CSS

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

绝对 div 认为它应该在内容开始时开始，并且由于您拥有的唯一内容是导航，所以它很困惑