第一次繪製不正確的頁面呈現

Question

我正在構建一個webpsite，但它有一個奇怪的問題。當我第一次導航到頁面時，它會在菜單頭之外呈現菜單。當我刷新頁面或導航到另一個頁面（使用相同的HTML）時，它將正確顯示。

我懷疑它與標題和瀏覽器中的圖像（包括IE10和Chrome）在初始加載時爲它保留了整個寬度。

HTML

<div id="header"> 
    <img id="logo" /> 
    <ul id="menu">...</ul> 
</div> 

CSS

img#logo { 
    height: 61px; 
    margin-top: -2px; 
    margin-left: 1em; 
} 
#header { 
    position: relative; 
    height: 3.09em; 
} 
#menu { 
    float: right; 
    height: 100%; 
} 
#menu li { 
    float: left; 
} 

當我把#menu#logo的問題解決之前，但感覺怪怪的做到這一點。任何人都知道這發生的確切原因？可以通過CSS更改來解決嗎？

Fiddle（僅可複製服務器上，而不是在小提琴，但它有助於說明）

Answer 1

如果添加float:left;屬性爲您的徽標選擇的isusue解決。

img#logo { 
    height: 61px; 
    margin-top: -2px; 
    margin-left: 1em; 
    float:left; 
} 

JSFIDDLE