css - 旋转装置后div宽度不一致

我的页面底部有一个流畅的布局，页面导航。我可以在所有可以使用的平台上正确显示导航，但是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是指向我的网站的链接。

最佳答案

删除overflow: hidden;可解决此问题。这是我唯一会引起布局问题的东西，因此我尝试将其删除。我需要这样做才能使布局中的其他内容正常工作，但是我可以解决它。

对于我来说，仍然很奇怪，旋转设备后问题不存在，我很想知道是否有人知道这是为什么。

关于css - 旋转装置后div宽度不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22892490/