Firefox 3.6和Firefox 4之间的水平导航CSS差异

问题描述

| 在FF4中，\“联系我们\”链接显示在www。页面顶部水平导航中我\“ Home \”链接的下方。 avaline .com（以及该域下的所有页面上）。在FF 3.6中，它看起来不错并且适合900px宽度的ul元素。 我想让它在浏览器之间更好地工作是什么呢？

<ul id=\"nav2\">
      <li><a href=\"/\" title=\"promotional products home\">home</a></li>
      <li><a href=\"/@R_503_4045@ion/Product-Testing-Library\" title=\"product safety\">product safety</a></li>
      <li><a href=\"/Current_Specials?loc=top\" title=\"current promotional product specials\">current specials</a></li>
      <li><a href=\"/Marketing-Tools/2011-Digital-Catalog-and-Request-Form\" title=\"digital and request catalog\">request catalog</a></li>
      <li><a href=\"/Marketing-Tools?loc=top\" title=\"marketing tools\">marketing tools</a></li>
      <li><a href=\"/@R_503_4045@ion/About-Us\" title=\"about us and our promotional products\">about us</a></li>
      <li><a href=\"/Contact-Us\" title=\"Contact us about our promotional products\">contact us</a></li>
    </ul>


#header_top ul#nav2 {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 79px; /* was 80px ll */
    width: 900px; /* was 776 ll */
    left: 7px; /* was 64px */
    font-family: Arial,Helvetica,sans-serif;
}
#header_top ul#nav2 li {
    float: left;
    font-weight: bold;
    padding: 0 23px;
    font-size: 11px;
    list-style:none;
}
#header_top ul#nav2 li a {
    color: #fff;
    text-transform: uppercase;
}
#nav3 a,#nav3 a a:link,#nav3 a a:visited,#nav2 li a,#nav2 a a:link,#nav2 li a a:visited,#nav1 li a,#nav1 a a:link,#nav1 li a a:visited {text-decoration: none;} 

#nav3 a:hover,#nav3 a:active,#nav2 li a:hover,#nav2 li a:active,#nav1 li a:hover,#nav1 li a:active {text-decoration:underline;} /* ll */

    

解决方法

        在Windows7 x64 Home Premium上运行的Firefox（v 4.0.1）上看起来不错 但是，我可以在IE9中重现您的\'bug \'，但是可以通过将li元素的填充更改为21px（而不是23px）来轻松解决。 jsFiddle：http://jsfiddle.net/KBgKa/5/