css - Webkit 浏览器不呈现位置 : relative correctly

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% 的视口(viewport)，所有浏览器都能正确呈现； .nav 将固定在顶部，所有浏览器都能正确呈现；和 .misc 将位于视口(viewport)之外，IE 和 FF 可以正确呈现，但 Chrome 和 Safari 不能。 Webkit 浏览器让 .misc 位于顶部，就好像它有 position: fixed 一样。

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

非常感谢您提供解决方案!

Answer 1

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