水平导航 CSS Firefox 3.6 和 Firefox 4 的区别

Posted 2023-05-07

【中文标题】水平导航 CSS Firefox 3.6 和 Firefox 4 的区别

【英文标题】：Horizontal Navigation CSS Difference between Firefox 3.6 and Firefox 4

【发布时间】：2011-09-15 17:07:42

【问题描述】：

在 FF4 中，“联系我们”链接显示在 www 页面顶部水平导航中的“主页”链接下方。 avaline .com（以及该域下的所有页面）。在 FF 3.6 中，它看起来很好，适合 900px 宽度的 ul 元素。

为了让它在浏览器中更好地工作，我缺少什么？

<ul id="nav2">
      <li><a href="/" title="promotional products home">home</a></li>
      <li><a href="/Information/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="/Information/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 */

【问题讨论】：

我们可以查看您的 html 的其余部分（header_top 和任何其他容器）吗？

你可以在 avaline .com 但那些包含元素并不会真正影响导航元素的宽度。

【参考方案1】：

在 Windows7 x64 Home Premium 上运行的 Firefox (v 4.0.1) 上看起来不错

但是，我可以在 IE9 中重现您的“错误”，但是通过将 li 元素的填充更改为 21px（而不是 23px）很容易解决这个问题。

jsFiddle：http://jsfiddle.net/KBgKa/5/