旋转设备后div宽度不一致答案

【问题标题】：Inconsistent div width after rotating device旋转设备后div宽度不一致
【发布时间】：2014-05-18 12:28:27
【问题描述】：

我有一个流畅的布局，底部有页面导航。我的导航可以在我能够使用的所有平台上正确显示，但 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 容器应该占据其父容器的整个宽度，而包含的两个 divs 应该占据 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 是我网站的链接。

【问题讨论】：

Chrome for iOS 中也会发生这种情况。
您是否尝试过移除您的 width:50% 并仅依赖浮动？也许将显示设置为内联块而不是块？没有小提琴之类的东西真的很难测试:(
@Sophisticake 谢谢，但由于这些是块级元素，删除宽度会将这些 divs 默认设置为 100% 宽度，从而使浮动无用。
我的直觉告诉我，这不是一个可以用您发布的代码轻松解释的问题。如果您可以在 Fiddle 中重新创建问题，或者提供一种测试代码的方法以便我可以在我的 iPhone 上对其进行编辑，那么我看不出有人能解决这个问题。告诉我，我很乐意提供帮助。

标签： css iphone wordpress mobile-safari fluid-layout

【解决方案1】：

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

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

【讨论】：