css - IE7 - margin : auto affecting sibling element

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 认为它应该在内容开始时开始，并且由于您拥有的唯一内容是导航，所以它变得困惑