Question

编辑 - 更新：事实证明问题是一个简单的浮动问题，用.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;

Answer 1

您已在position: relative下方添加了.nav ul div。但是其他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%;
}

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

1 个答案: