我正在构建一个网站,但它有一个奇怪的问题。当我第一次导航到该页面时,它会将菜单呈现在页眉之外。当我刷新页面或导航到另一个页面(具有相同的 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中重现,但有助于说明)
最佳答案
如果将 float:left;
属性添加到 Logo 选择器,问题就解决了。
img#logo {
height: 61px;
margin-top: -2px;
margin-left: 1em;
float:left;
}
关于html - 第一次绘制时页面呈现不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19398373/