html - 最初の描画でページのレンダリングが正しくない

Question

Web サイトを構築していますが、奇妙な問題があります。最初にページに移動すると、ヘッダーの外側にメニューが表示されます。ページを更新するか、(同じ 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 (Fiddle ではなく、サーバー上でのみ再現できますが、説明には役立ちます)