网站布局在 webkit 中损坏，但在重新加载后更正答案

【问题标题】：Website layout broken in webkit, but corrects after reload网站布局在 webkit 中损坏，但在重新加载后更正
【发布时间】：2014-04-13 03:26:27
【问题描述】：

编辑 - 更新：原来问题是一个简单的浮动问题，通过 .header h1{ float:left;} 解决。但是我仍然很好奇为什么 Safari 和 Chrome 首先会出现问题，以及为什么重新加载会纠正它。所以我留下了原始未更正的代码，以防有人有兴趣诊断。

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

我有两个问题：

为什么布局中断？ - 已解决。
为什么浏览器重新加载或媒体查询触发更正了问题？

这是我认为相关的代码。我是新手，所以我的 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;

【问题讨论】：

标签： html css layout webkit

【解决方案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%;
}

【讨论】：