html - 第一次绘制时页面呈现不正确

Question

我正在构建一个网站，但它有一个奇怪的问题。当我第一次导航到该页面时，它会将菜单呈现在页眉之外。当我刷新页面或导航到另一个页面(具有相同的 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中重现，但有助于说明)

Answer 1

如果将 float:left; 属性添加到 Logo 选择器，问题就解决了。

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

JSFIDDLE