1

我无法弄清楚这一点。我已经完成了研究，所以请不要评论我做更多的研究。另外，我是菜鸟，所以要友善；）

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

将鼠标悬停在蓝色主导航栏（标题区域）中的两个黑色矩形上。a:hover 应该使颜色变为灰色。问题是在 Chrome 中，这看起来很完美。但是，在 Firefox 中，padding-right 不够长之类的，所以“教育课程”按钮的最右侧总是有一个黑色的小矩形（只有将光标悬停在按钮上时才能看到）。换句话说，当鼠标悬停时，灰色框不会一直到按钮区域的右侧末端。我只是不明白为什么这在 Chrome 中看起来和工作得很好，但在 Firefox 中却出现了错误......

当我说我已经尽我所能在 Firefox 中使用 Firebug 修复它时，请相信我。如果你在浏览器中使用编辑器来玩它，你会发现如果你尝试让 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;
  float: left;
  margin: 0;
  padding: 0;
}

ul#top-menu {
  margin: -5px 0.325em 0 0.325em;
  position: absolute;
  padding: 0;
  z-index: 100;
  top: 0;
  left: 3em;
  width: 367px;
}

ul#top-menu li {
  line-height: 3em;
  list-style-type: none;
  height: 49px;
  background-color: #2C2C2C;
  float: left;
}

li#li-right {
  list-style-position: inside;
  border-left: 2px solid #5E5E5E;
}

ul#top-menu li a {
  font-weight: bold;
  font-size: 11pt;
  text-decoration: none;
  padding: 15px 10px 16px 10px;
  color: #ffffff;
}

ul#top-menu li a:hover {
  text-decoration: none;
  width: auto;
  color: #ffffff;
  background-color: #505354;
  padding: 15px 10px 17px 10px;
}
4

3 回答 3

5

这是因为标签（锚标签）具有内联的默认显示属性

由于CSS 框模型，您需要调整填充并将锚标签显示属性设置为 display:block;

显示块允许锚标签填充 LI 标签的整个空间

将ul#top-menu li a更改为：

ul#top-menu li a{
    color: #FFFFFF;        
    font-size: 11pt;
    font-weight: bold;

    display: block; /* add this */
    padding: 0 10px; /* add this */
}

CSS 盒子模型添加内容 + 内边距 + 边框 + 边距

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

于 2013-11-07T20:29:12.007 回答
1

看看这个 CSS 规则：

li#li-right {
  border-left: 2px solid #5E5E5E;
  list-style-position: inside;
}

Droppinglist-style-position: inside似乎可以解决您在 Firefox 中的问题（并且在 Chrome 中仍然有效），但我尚未测试其他浏览器中的影响。CSS 规则在此处记录。

于 2013-11-07T20:20:23.640 回答
1

原因：如果您不指定，浏览器会应用自己的 css。Firefox为你的子弹添加了空间（不知何故）

法郎：

  • 列表样式图像无
  • 列表样式位置在外面
  • 列表式光盘

谷歌浏览器：

  • 列表样式图像：无；
  • 列表样式位置：内部；
  • 列表样式类型：无；

用户 JasonSperske 为您提供了一个修复解决方案，我邀请您重置您的 css。

PS。同时，邀请您查看：https ://stackoverflow.com/help AND http://sscce.org/

阅读和理解这些页面会给你一些声誉点

于 2013-11-07T20:24:00.643 回答