css - 旋转设备后 div 宽度不一致

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 中正确显示，无论初始页面加载时的视口(viewport)大小如何。但是在 iPhone 的 Safari 中，nav 容器的宽度小于其父容器宽度的一半，直到我将屏幕旋转到横向并返回。我上传了一张图片 here向您展示它的外观。

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

Answer 1

删除 overflow: hidden; 解决了这个问题。这是我能看到的唯一会导致布局问题的东西，所以我尝试删除它。我需要它来使布局中的其他内容正常工作，但我能够解决它。

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