第一次绘制时页面渲染不正确

时间:2013-10-16 08:19:10

标签: html css

我正在建立一个网站,但它有一个奇怪的问题。当我第一次导航到页面时,它将在标题之外呈现菜单。当我刷新页面或导航到另一个页面(使用相同的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 (只能在服务器上重现,不能在小提琴中重现,但有助于说明)

1 个答案:

答案 0 :(得分:0)

如果您将float:left;属性添加到徽标选择器,问题就解决了。

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

JSFIDDLE