小编chr*_*ion的帖子

我无法弄清楚这一点.我已经完成了研究,请不要评论我做更多的研究.此外,我是一个菜鸟,所以要好;)

这是我的网站:http://library.skybundle.com/

将鼠标悬停在主蓝色导航栏(标题区域)中的两个黑色矩形上.a:悬停应该使颜色变为灰色.问题是在Chrome中,这看起来很完美.但是,在Firefox中,填充权限不够长或者其他东西,所以"教育课程"按钮的最右侧总是有一个小的黑色矩形(只有当光标悬停在按钮上时才会显示).换句话说,鼠标悬停时灰色框不会一直到按钮区域的右侧端.我只是不明白为什么这在Chrome中看起来效果很好,但在Firefox中却有问题......

相信我,当我说我已尝试使用Firebug在Firefox中修复它时所做的一切.如果您使用浏览器中的编辑器来玩它,您会看到如果您尝试为Firefox填充更长时间,它会将整个按钮弹出一个新行.因此,为了解决这个问题,你必须使容器更宽,但原来的问题又回来了.这是一个问题圈,我相信你们中的一个天才会看到一个我想念的简单解决方案.

请帮忙.谢谢!

编辑:

这是我的JSFiddle和代码.请注意它在Chrome中看起来很棒但在Firefox中看起来不是很好

http://jsfiddle.net/S4st8/

HTML:

<div id="navigation">
  <div id="navigation-inner">
    <div id="page-nav">
      <div id="primary-nav">
        <ul id="top-menu">
          <li id="li-left"><a href="#">Product Training Videos</a></li>
          <li id="li-right"><a href="#">Educational Courses</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

#navigation {
  background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 100%;
}

#navigation-inner {
  margin: 0px auto;
  padding: 0px;
  height: 48px;
  width: 960px;
}

#page-nav {
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 960px;
}

div#primary-nav {
  position: relative;
  display: block; …