导航栏在铬中定位错误 [英] navbar positioning bug in chrome

问题描述

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

这是它应该看起来的样子，它大约有一半time：

这是因为某些原因被推下时发生的情况。 $ b

这个网站是活的，你可以亲身体验这个问题< a href =http://brannondorsey.com =nofollow noreferrer>这里。可能需要在网站上点击一下才能取消< ul> 。

这里是 html / php 我使用的是：

 < div class =头> 
< 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; 
颜色：#fff; 
 font-size：26pt; 
 display：inline-block; 
 padding-top：8px; 
} 
  

同样，我只在google chrome中遇到这个问题。
感谢您的帮助！

解决方案

从来没有想过这个问题，但我使用绝对定位作为解决方法。 p>

I am having a strange css positioning issue in chrome only. I have a menu <ul> for navigation that sometimes gets pushed down randomly. Refreshing the page always fixes the problem. Strangely, sometimes if I refresh the page when it is being displayed correctly it gets pushed down.

This is how it is supposed to look, and it does about half of the time:

And this is what happens when it gets pushed down for some reason.

The site is live, and you can experience the problem for yourself here. It might take some clicking around the site to get the <ul> to drop.

Here is the html/php that I am using:

<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>

And relevant 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;
}

Again, I am only experiencing this problem in google chrome. Thanks for the help!

解决方案

Never figured the problem out but I used absolute positioning as a workaround.

这篇关于导航栏在铬中定位错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！