webkit中的网站布局已损坏，但在重新加载后进行了更正

Question

编辑-更新：原来这个问题是一个简单的浮点问题，用.header h1｛float:left；｝解决。但我仍然很好奇Safari和Chrome最初为什么会出现这个问题，以及为什么重新加载会更正它。所以我保留了原始未更正的代码，以防有人对诊断感兴趣。

原始消息：
我很困惑。当第一次在Chrome或Safari中加载我的网站时(firefox很好(，导航显示不正确。但是，当我重新加载/刷新页面时，布局问题(通常取决于浏览器和操作系统(会消失，并按预期显示。如果我更改浏览器窗口大小(收缩然后展开(，它也会(同样，通常(进行更正——因此，在更改导航的媒体查询生效后。此外，如果我完全关闭浏览器，然后打开网页，问题就会再次出现。

我有两个问题：

1. 为什么布局被破坏了？-解决
2. 为什么浏览器重新加载或媒体查询触发会更正问题

这是我认为相关的代码。我是新手，所以我的css可能有一些奇怪和多余的代码。

HTML

<div class="header">
    <div class="logo"><h2>Logo</h2></div>
    <h1>Name</h1>
    <div class="nav">
    <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li></ul>
    </div>
    <h3>Subject</h3>
</div>

CSS

.header{
    padding-left: 20px;
    margin: 0 auto;
}
.header h1, .nav{
    display: inline-block;
}
.nav {
    width: 400px;
    height: 100px;
    line-height: 100px;
    margin-right: 0;
    padding-right: 0;
    float: right;
}
.nav ul {
    display: inline;
    list-style: none;
    position: relative;
    padding: 0;
    width: 100%;
}
.nav li {
    display: block;
    float: left;
    text-align: center;
    text-transform: uppercase;
    width: 33%;
}

这是媒体查询，以防与相关

@media only screen and (max-width: 610px) {
    .header h1{
    display: none;
    }
    .logo h2{
        display: inline;   
    }
    .header{
        text-align: center;
    }
    .nav{
        float: none;
        margin-left: -12px;
        height: 50px;
        line-height: 50px;
    }
    .wrap{
        padding-left: 0px;
    }
     .header h3{
        margin-top: -70px;
         margin-left: -12px;

Answer 1

您在下面的.nav ul div中添加了position: relative。但其他div的情况是，它们有默认的静态定位。我认为这就是问题所在。请确保每个div都有相对定位，并将其他div重新定位在相应的确切位置。

.nav ul {
    display: inline;
    list-style: none;
    position: relative;
    /*relative positioning others are static default change them in relative */
    padding: 0;
    width: 100%;
}