Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Tab Menu with CSS

  • 2 个回答
  • 1 人有此问题
  • 19 次查看
  • 最后回复者为 cor-el

more options
<div id="wrapmenu">
   <ol id="toc">               
      <li><a href="index.php"><span>Home</span></a></li>
      <li><a href="samplenp.php"><span>Sample NPs</span></a></li>
      <li><a href="contact.php"><span>Contact</span></a></li>
   </ol>
</div>

The above HTML produces a cool tab menu at the top of my web page when I am browsing with IE and Google Chrome but not when I am browsing with Firefox. Why?


#wrapmenu {
    width: 880px;
    margin-left: auto ;
    margin-right: auto ;
    clear: left;
    color: #990000;
}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc a {
    background: #990000;
    color: #E8E8E8;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}

ol#toc a:hover {
    background-color: #CC0000;
    color: #FFFFFF;
    background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc li {
    float: left;
    margin: 0 1px 0 0;
    font-size: 30px;
}

ol#toc li.current a {
    background-color: #FF3300;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
}

ol#toc li.current span {
    background-position: 100% -60px;
}

ol#toc span {
    background: 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
<pre><nowiki><div id="wrapmenu"> <ol id="toc"> <li><a href="index.php"><span>Home</span></a></li> <li><a href="samplenp.php"><span>Sample NPs</span></a></li> <li><a href="contact.php"><span>Contact</span></a></li> </ol> </div></nowiki></pre> The above HTML produces a cool tab menu at the top of my web page when I am browsing with IE and Google Chrome but not when I am browsing with Firefox. Why? <pre><nowiki>#wrapmenu { width: 880px; margin-left: auto ; margin-right: auto ; clear: left; color: #990000; } ol#toc { height: 2em; list-style: none; margin: 0; padding: 0; } ol#toc a { background: #990000; color: #E8E8E8; display: block; float: left; height: 2em; padding-left: 10px; text-decoration: none; } ol#toc a:hover { background-color: #CC0000; color: #FFFFFF; background-position: 0 -120px; } ol#toc a:hover span { background-position: 100% -120px; } ol#toc li { float: left; margin: 0 1px 0 0; font-size: 30px; } ol#toc li.current a { background-color: #FF3300; background-position: 0 -60px; color: #fff; font-weight: bold; font-size: 30px; } ol#toc li.current span { background-position: 100% -60px; } ol#toc span { background: 100% 0; display: block; line-height: 2em; padding-right: 10px; }</nowiki></pre>

由cor-el于修改

所有回复 (2)

more options

hi, support.mozilla.org is intended for end-user support. if you have a question regarding web development please refer to Where to go for developer support instead. thank you for your understanding!

more options

I see not much difference between Firefox and Google Chrome with this code. There are faint vertical lines in Firefox that I do not see in Google Chrome.