Question

我的流畅布局底部有页面导航。我的导航能够在我能够掌握的所有平台上正确显示，但iOS的Safari中存在不一致。

Safari不会以纵向方式正确显示导航，但如果我将其旋转为横向模式，然后再次显示为纵向。

导航的HTML如下所示：

<nav id="nav-below">

    <div class="nav-previous">
        <a href="#" rel="prev">Previous link</a>
    </div>

    <div class="nav-next">
        <a href="#" rel="next">Next link</a
    </div>                      

</nav>

nav容器应占用其父级的全部宽度，而包含div的两个容器应占用nav的50％。这是我的（简化）CSS：

nav {
    display: block;
    overflow: hidden;
}

#nav-below {
    margin:2em 9% 0;
    padding:1em 0 0;
    border-top:4px double #e2f7ed;
}

.nav-previous {
    float: left;
    width: 50%;
}
.nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

无论初始页面加载时的视口大小如何，都可以在IE，Firefox和Chrome中正确显示。但是在iPhone的Safari中，nav容器的宽度小于其父容器宽度的一半，直到我将屏幕旋转到横向并返回。我上传了一张图片here，以向您展示它的样子。

有谁知道可能导致此问题的原因和/或如何解决此问题？如果有帮助，here是指向我网站的链接。

Answer 1

删除overflow: hidden;可解决此问题。这是我唯一能看到的往往导致布局问题的东西，所以我尝试删除它。我需要这个在布局工作中做其他事情，但我能够解决它。

我仍然很奇怪旋转设备后问题不存在，我很想知道是否有人知道原因。

旋转装置后的div宽度不一致

1 个答案: