仅在 Firefox 中填充错误

Question

我在填充方面遇到了这个恼人的问题。我正在构建一个菜单，这里是它的 html 代码（我已经删除了所有其他选项卡，只留下一个以便更好的可读性）：

<div id="menu">
    <a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a>
</div>

$description 可以采用两个值：

1. selected
2. notSelected

并且 $path 只是为了正确的相对寻址。

这是 CSS 代码：

#menu {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background-color: #1958b7;
    padding: 0 0 20px 0;    /*Here set the size for tabs.*/
    border-top: 10px #2175bc solid; /*Here we add border.*/
}

#menu a {
    color: #fff;    /*White color. */
    text-decoration: none;  /*No decoration.*/
    padding: 0px 9px 5px 9px;   /*The padding for tab.*/    
}
.selected {
    border-left: 8px solid #5ba3e0; /*Defining color and width for left border.*/
    border-right: 8px solid #5ba3e0;    /*Defining color and width for right border.*/
    background-color: #2586d7;
}
.notSelected {
    border-left: 8px solid #1958b7;
    border-right: 8px solid #1958b7;
    background-color: #2175bc;
}

现在问题出在 #menu a 的填充上：

padding: 0px 9px 5px 9px;   /*The padding for tab.*/

在 Opera、Chrome、IE7、IE8 和 IE9 中它可以正常工作，结果是这样的：

但在 Firefox 4.0.1 中（我记得这也是 FF 3.6 的问题），它显示如下：

如您所见，FF 无缘无故地将 1px 置于标签 Opis 上方，即使我已明确定义不在顶部放置任何填充。现在，选项卡顶部可以看到 1 像素的深蓝色。

Answer 1

虽然它在 Ff 3.6.17 到 FF 5.0 中工作正常，但这种情况可能会在空白处发生标签之间。

的解决方法（以下任何一个）

1. 应该有助于

   删除空格
   

   Opis

2. set #menu{font-size:0px;line-height: 0;} 并将这些属性重置为您想要的链接 #menu a{font-size:12px;line-height:12px;}

3. 使 #menu 内的链接浮动，使用 #menu a{float:left;}

Answer 2

它有时（仅当我调整 jsFiddle iframe [??] 大小时才会出现间隙）在我的 Firefox 4 中看起来像这样：

http://jsfiddle.net/tvHgX/

所以，有一个间隙，但它看起来与您的屏幕截图完全不一样。

我通过将 float: left 添加到 #menu a 修复了间隙，使其永远不会出现。我还用 overflow:hidden 替换了您的行：

padding: 0 0 20px 0;    /*Here set the size for tabs.*/

以清除浮动，这样您就不必手动指定 padding。如果您愿意，可以恢复此修复。

完整代码： http://jsfiddle.net/tvHgX/1/

如果您出于某种原因不想使用浮动，则 display: inline-block 也可以代替 float: left。