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的位置更改为绝对位置然后相应地调整其他元素的样式来找到解决方法，以解决流程中断的问题。祝你好运。