2

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

这就是它应该看起来的样子,它大约有一半的时间:

在此处输入图像描述

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

在此处输入图像描述

该站点已上线,您可以在此处亲身体验该问题。可能需要在网站周围点击一下<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;
}

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

4

1 回答 1

1

从来没有发现问题,但我使用绝对定位作为解决方法。

于 2013-07-26T16:03:13.390 回答