Question

为一堂课做一个学术模拟。它只使用HTML和CSS简单地复制现有公司的网页。上周所有浏览器都能完美运行。我昨天打开它，在提交之前检查它，但是有一个问题。

仅在Chrome中，我的导航栏的最后一个元素是直接向下撞击19px。

页面。 link
css。 link

相关的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文档中。同样的错误。

我完全失去了。请帮忙！

Answer 1

清除填充。这个帖子就是这样一个列出的，公认的解决方案。

Chrome的CSS问题 - 导航元素凹凸

1 个答案: