0

为班级制作学术模型。它是仅使用 HTML 和 CSS 对现有公司网页的简单复制。上周在所有浏览器中一切正常。我昨天打开它提交前检查它，有问题。

仅在 Chrome 中，我的导航栏的最后一个元素被直接降低了 19 像素。

这页纸。链接
css。关联

相关的CSS。

#navbar {
    position:absolute;
    display:block;
    top: 115px;
    left:0px;
    width:100%;
    height: 45px;
    background:url(../images/navbar_section.png) repeat-x;
    padding:0px;
    margin:0 auto;
    text-align:center;
    -webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
    -moz-box-shadow:    0px 2px 2px rgba(50, 50, 50, 0.27);
    box-shadow:         0px 2px 2px rgba(50, 50, 50, 0.27);
}
#navmenu {
    float:left;
    left:50%;
    position:relative;
    width:964px;
}
#navmenu ul, li {
    display: inline;
}
#navmenu li a {
    font-size:1em;
    float: left;
    color: white;
    font-weight:bold;
    border-left:2px groove #008dcb;
    text-decoration: none;
    line-height:45px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    right:50%;
    padding-left:10px;
    padding-right:10px;
    width:138px;
}
#navmenu li a:hover {
    color: white;
    background:url(../images/navbar_visited.png);
}
#navmenu li:last-child a {
    border-right:2px groove #008dcb;
}

相关的html。

<div id="navbar">
  <div id="navmenu">
    <ul>
      <li><a href="#">SHOP</a></li>
      <li><a href="#">WHY ALLTEL</a></li>
      <li><a href="#">PLANS</a></li>
      <li><a href="#">APPS & MORE</a></li>
      <li><a href="#">CAREERS</a></li>
      <li><a href="#">EMPLOYEES</a></li>
    </ul>
  </div><!--end of navmenu-->
</div><!--end of navbar-->

我知道如果你查看 css 文件，看到 navmenu 和 navmenu2，可能会有点混乱，但只关注 navmenu，因为第二个是我没有实现的不同样式。

我尝试删除宽度元素而错误没有变化。
我试过只将上面的代码复制到一个新的 html 文档中。同样的错误。

我完全不知所措。请帮忙！

4

1 回答 1

0

清除填充。这是一个帖子，所以这个问题有一个列出的、公认的解决方案。

于 2013-04-15T16:19:10.170 回答