IE7 - 與Firefox不同的絕對定位偏移量？

Question

我正在整理另一個開發人員的工作，他們似乎在CSS上做了一個僞劣的工作。

頁面上有主要的「包裝」div，裏面有一個標誌和導航圖像。圖像使用「position：absolute」並使用CSS「top」屬性來抵消它們。然而，Firefox和IE似乎從另一個角度開始了他們的偏移，這意味着該徽標比它應該在IE中的位置高出大約100px。

這是一個IE瀏覽器的CSS錯誤或已知的東西？

實例問題：http://barry.cityjoin.com/mccamb/

Answer 1

如果你想絕對以內使用上，右，底部和/或離開的包裝定位元素，包裝的位置必須明確設定爲相對的。否則，絕對元素將被定位在視圖端口內。

一點點工作示例：

<style> 
    .wrapper 
    { 
     position: relative; 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     top: 10px; 
     left: 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     top: 80px; 
     left: 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

另一種可能性是用利潤來定位的絕對要素：

<style> 
    .wrapper 
    { 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     margin: 10px 0 0 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     margin: 80px 0 0 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

的結果是一樣的，並應在所有瀏覽器中工作。