0

正在修复我的导航菜单，因为我遇到了 google chrome 用户无法单击我网站上的导航栏链接的问题。新的解决方案修复了它，但是我现在有一个导航栏，它与一个页面上的布局偏离，而不是在另一个页面上。

访问http://www.survivaloperations.net获取主站点视图（排列）和http://www.survivaloperations.net/forums/获取论坛视图（左偏移）。

导航的 HTML 是：

<ul id="nav">
        <li><a id="home" href="./news" alt="Home"></a>
        <li><a id="members" href="./members"></a>
        <li><a id="forums" href="./forums/" alt="Forums"></a>
        <li><a id="about" href="./about"></a>
        <li><a id="guides" href="http://www.survivaloperations.net/forums/viewforum.php?f=10"></a>
        <li><a id="drawings" href="http://www.survivaloperations.net/forums/viewforum.php?f=6"></a>
        <li><a id="faq" href="./faq"></a>
        <li><a id="downloads" href="./downloads"></a>
        <li><a id="sponsors" href="./sponsors"></a>
        <li><a id="nav_break" href=''></a>
        <li><a id="apply" href="./forums/application.php"></a>
    </ul>

导航的 CSS 是：

 #nav {   margin:297px 0 0 -40px;   position:absolute; }

 #nav a {   display:block;
     height:35px; }

 #nav li  {   display:inline-block; }

 #home {
     background: url('http://survivaloperations.net/images/home.jpg') no-repeat bottom;   width:106px; }
 #home:hover {
     background: url('http://survivaloperations.net/images/home_up.jpg') no-repeat
 bottom; }

 #members {
     background: url('http://survivaloperations.net/images/members.jpg') no-repeat
 bottom;   width:96px; }
 #members:hover {
     background: url('http://survivaloperations.net/images/members_up.jpg') no-repeat
 bottom; }

 #forums {
     background: url('http://survivaloperations.net/images/forums.jpg') no-repeat bottom;   width:96px; }
 #forums:hover {
     background: url('http://survivaloperations.net/images/forums_up.jpg') no-repeat
 bottom; }

 #about {
     background: url('http://survivaloperations.net/images/about.jpg') no-repeat bottom;   width:96px; }
 #about:hover {
     background: url('http://survivaloperations.net/images/about_up.jpg') no-repeat
 bottom; }

 #guides {
     background: url('http://survivaloperations.net/images/guides.jpg') no-repeat bottom;   width:96px; }
 #guides:hover {
     background: url('http://survivaloperations.net/images/guides_up.jpg') no-repeat
 bottom; }

 #drawings {
     background: url('http://survivaloperations.net/images/drawings.jpg') no-repeat
 bottom;   width:96px; }
 #drawings:hover {
     background: url('http://survivaloperations.net/images/drawings_up.jpg') no-repeat
 bottom; }

 #faq {
     background: url('http://survivaloperations.net/images/faq.jpg') no-repeat bottom;   width:96px; }
 #faq:hover {
     background: url('http://survivaloperations.net/images/faq_up.jpg') no-repeat bottom; }

 #downloads {
     background: url('http://survivaloperations.net/images/downloads.jpg') no-repeat
 bottom;   width:96px; }
 #downloads:hover {
     background: url('http://survivaloperations.net/images/downloads_up.jpg') no-repeat
 bottom; }

 #sponsors {
     background: url('http://survivaloperations.net/images/sponsors.jpg') no-repeat
 bottom;   width:100px; }
 #sponsors:hover {
     background: url('http://survivaloperations.net/images/sponsors_up.jpg') no-repeat
 bottom; }

 #nav_break {   background:url('http://www.survivaloperations.net/images/nav_spacer.jpg');
     width:254px; }

 #apply {
     background: url('http://survivaloperations.net/images/apply.jpg') no-repeat bottom;   width:108px; }
 #apply:hover {
     background: url('http://survivaloperations.net/images/apply_up.jpg') no-repeat
 bottom; }

我在论坛和正常的网站样式表中看不到任何会导致这种情况的东西。如果我将 -40px 更改为 0，它会弄乱正常站点并修复论坛。

任何想法都会很棒！

注意：整个 CSS 可以在http://www.survivaloperations.net/style.css找到

4

1 回答 1

2

首先，当页面调整大小时，您的导航会中断。

#nav {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

编辑

我注意到你也有填充问题。所以我也会添加padding: 0;到那个 CSS 中。

于 2012-08-09T02:16:53.693 回答