我只在 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;
}
同样,我只在谷歌浏览器中遇到这个问题。谢谢您的帮助!