0

导航栏（可以在这里查看）在谷歌浏览器（最新版本）中已经错位，编码没有任何变化。

两行之间的大空白过去不存在，四个最右边的链接的进一步错位也不存在。

我只知道 Chrome 中的这个问题 - 它在 Safari 和 Firefox 中正确显示。

代码：

header.php 中导航栏的代码片段如下：

<center>

<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate"><a href="../index.php">Home</a></li>
<li class="navigate"><a href="../buses.php">Bus Routes</a></li>
<li class="navigate"><a href="../maps.php">Maps &amp; plans</a></li>
<li class="navigate"><a href="../news.php">News</a></li>
<li class="navigate"><a href="../myallocations.php">Enthusiasts</a></li>
<li class="navigate"><a href="../myroute/index.php">MyRoute</a></li>
<li class="navigate"><a href="../tbrtwitter.php">Live updates</a></li>
<li class="navigate"><a href="../tickets.php">Tickets</a></li>
</ul>
</div></div>

<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite"><a href="../conpasses.php">Free travel</a></li>
<li class="navigateopposite"><a href="../mobileservices.php">Mobile</a></li>
<li class="navigateopposite"><a href="../operators.php">Operators</a></li>
<li class="navigateopposite"><a href="../usingthebus.php">Using the bus</a></li>
<li class="navigateopposite"><a href="../team.php">TBR Team</a></li>
<li class="navigateopposite"><a href="../contact.php">Contact</a></li>
<li class="navigateopposite"><a href="../advertise.php">Advertising</a></li>
<li class="navigateopposite"><a href="../about.php">About</a></li>
</ul>
</div></div>

</center>

CSS：

相关的 CSS 也在这里：

/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}

.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}

问题：

什么会导致这种奇怪的错位？

4

1 回答 1

0

尝试将此添加到您的 CSS

li.navigate, li.navigateopposite {
    float: left;
    margin: 0;
}

我通过 Chrome 的开发者工具添加了这个，它似乎解决了这个问题。

这可能会解决它，但很严重......正如 j08691 和 David Thomas 所指出的......那是你在那里进行的一些非常疯狂的 HTML。出于好意，我希望你不介意我发表一些评论吗？

  1. 您<head>的文档中有多个 s - 您只能有一个。
  2. 您<div>纯粹出于布局目的使用 - 如果您需要在布局中添加空格，则应该使用纯 CSS ... HTML，顾名思义，仅用于标记 - 不是样式信息。据我估计，您可能会损失至少一半的加价。概括地说，你拥有的标记越多，你遇到的困难就越多，显然是随机破坏的。
  3. 我可以理解不想一推就支持IE7，但是所有版本的IE？？（“有什么不工作？您使用的是 Internet Explorer”）。我知道 IE 可能很可恨，但你不能把这本书扔给你所有网站访问者的 10%。

我希望这可以帮助您朝着正确的方向前进。

于 2013-05-16T23:44:41.987 回答