Webkit 浏览器不呈现位置：相对正确

Question

我有一个 IE 和 FF 可以正确呈现但 Chrome 和 Safari 不能正确呈现的网站。

这是 HTML：

<div class="cover">
</div>
<div class="nav">
</div>
<div class="misc">
</div>

这是 CSS：

.cover{
position:absolute;
background-color:#00c9f8;
z-index:600;
height:100%;
}
.nav{
width:100%;
position:fixed;
top:0;
z-index:500;
}
.misc{
position:relative;
top:100%;
height:80%;
min-height:300px;
width:100%;
padding:0;
}

预计.cover 将填充 100% 的视口，所有浏览器都正确呈现该视口； .nav 将固定在顶部，所有浏览器都正确呈现； .misc 将位于视口旁边，IE 和 FF 可以正确呈现，但 Chrome 和 Safari 不能。 Webkit 浏览器将 .misc 放在顶部，就好像它有 position: fixed。

上例中.misc代表实际站点中的.orbit-wrapper。 .menu-box-row 也存在同样的问题，其中position: relative 未正确呈现。

非常感谢您的解决方案！

Answer 1

相对定位使用的百分比值在 Webkit 中一直是个问题。您应该能够通过将 .orbit-wrapper 的位置更改为绝对位置，然后相应地调整其他元素的样式来解决流程中断的问题，从而找到解决方法。祝你好运。