导航栏偏移？

Question

正在修复我的导航菜单，因为我遇到了 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 找到

Answer 1

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

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

编辑

我注意到您也有填充问题。所以我也会在该 CSS 中添加 padding: 0;。