html - Chrome 中的导航栏定位错误

Question

我在 chrome 中遇到了一个奇怪的 css 定位问题。我有一个菜单 <ul>用于有时被随机下推的导航。刷新页面总能解决问题。奇怪的是，有时如果我在页面正确显示时刷新页面，它会被下推。

这是它应该看起来的样子，而且它在大约一半的时间里是这样的:

这就是它由于某种原因被推下时会发生的情况。

本站已上线，问题可自行体验here .可能需要在网站周围点击一下才能获得 <ul>下降。

这是 html/php我正在使用:

<div class="header">
<nav class="navbar">
  <a href="<?php echo url("home") ?>" class="title"><?php echo strtoupper($site->title())?></a>
  <ul>
    <?php foreach($pages->visible() AS $p): ?>
    <li><a<?php echo ($p->isOpen()) ? ' class="active"' : '' ?> href="<?php echo (strtolower(($p->title)) == "work") ? url("home") : $p->url(); ?>"><?php echo html($p->title()) ?></a></li>
    <?php endforeach ?>
  </ul>
</nav>
</div>

与相关css :

 div.header{
   height: 80px;
   background-color: #000000;
   margin-bottom: 20px;
 }
 div.header nav.navbar{
   width: 960px;
   margin: auto;
   padding-top: 20px;
 }

 .navbar ul{
   float: right;
   padding-top: 10px;
   display: inline;
   list-style-type: none;
 }

.navbar ul li{
  margin-left: 20px;
  display: inline;
 }

.navbar a.title{
  width: 500px;
  color: #fff;
  font-size: 26pt;
  display: inline-block;
  padding-top: 8px;
}

同样，我只在谷歌浏览器中遇到过这个问题。 感谢您的帮助!

Answer 1

从来没有想出问题，但我使用绝对定位作为解决方法。