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使他們像這樣：

enter image description here

頭的覆蓋被推送的資產淨值做同樣的量 - 完全神祕的對我，爲什麼會發生這種情況，它不會發生在任何其他瀏覽器，包括IE8 ...幫助，請？？

來源

2013-07-26 romeboards

我無法測試它因爲我沒有IE7在這裏，但你可以嘗試設置覆蓋層的頂部和左側爲0（絕對元素） – Huangism

是的，這似乎是做伎倆... _sigh_ – romeboards

對於傳統的IE它總是一個痛苦，把頂部和左更安全 – Huangism

添加這個CSS

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

格認爲它應該開始whee內容開始的絕對的，因爲你擁有的唯一內容就是導航，所以糊塗了

來源

2013-07-26 20:16:14 Huangism

IE7 - 保證金：汽車影響同級元素

回答

相關問題