2011-06-15 80 views
0

在FF4中,「聯繫我們」鏈接出現在www的頂部水平導航的「主頁」鏈接下。 avaline .com(以及該域下的所有頁面)。在FF 3.6中,它看起來很好,並且適合寬度爲900px的ul元素。水平導航CSS與Firefox 3.6和Firefox 4的區別

我錯過了什麼讓它更好地跨瀏覽器工作?

<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 */ 
+0

我們能看到你的HTML(header_top和任何其他容器)的休息嗎? – antinome 2011-06-15 17:01:55

+0

你可以在avaline.com上,但是那些包含元素的元素並不會真正影響導航元素的寬度。 – Lauren 2011-06-17 14:33:25

回答

0

它出現在我的Firefox(V 4.0.1)上的Windows7 64位家庭高級版運行良好

我可以,但是,重現IE9你的「錯誤」,但是這很容易通過改變固定將li元素填充到21px(而不是23px)。

的jsfiddle:http://jsfiddle.net/KBgKa/5/