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>

这在IE、Firefox和Chrome中都能正确显示，无论初始页面加载时的视口大小如何。但在iPhone的Safari中，

nav

容器的宽度小于其父容器宽度的一半，直到我将屏幕旋转到横向并返回。我上传了一张图片给你看

---

有人知道是什么导致了这一问题和/或如何解决这一问题吗？如果有帮助的话，是指向我的网站的链接。

删除

溢出：隐藏修复了该问题。这是我能看到的唯一一件容易导致布局问题的东西，所以我试着把它去掉。我需要这个来做布局中的其他事情，但我能够解决它

我仍然很奇怪，在旋转设备后，这个问题没有出现，我很好奇是否有人知道这是为什么。
在Chrome for iOS中也会发生这种情况。您是否尝试过删除宽度：50%并仅依赖浮动？是否可以将显示设置为内联块而不是块？如果没有小提琴之类的东西，很难测试这一点：（@Sophisticake谢谢，但由于这些是块级元素，删除宽度会将这些
div
s默认设置为100%宽度，使浮动无效。我的直觉告诉我，这不是一个很容易用您发布的代码解释的问题。如果您可以重新创建问题，或者提供一种方法来测试所以我可以在我的iPhone上编辑它，我不知道怎么有人能弄明白。让我知道，我很乐意帮忙。
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%;
}