仅在Firefox中填充错误

Question

我有填充这个恼人的问题。我正在构建一个菜单，这里是它的html代码（我已经取出所有其他选项卡，只留下一个以提高可读性）：

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

$ description可以采用两个值：

1. 选择
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之上，即使我已明确定义不要在顶部放置任何填充。现在，标签顶部可以看到1px的强蓝色。

Answer 1

虽然在Ff 3.6.17 up-to FF 5.0中对我来说works fine，但这可能发生在标签之间的空白处。

解决方法（以下的任何一个）应该有所帮助

1. 删除空格
   <div id="menu"><a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a><div>

2. 设置#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来修复差距。我也替换了你的行：

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

使用overflow: hidden清除浮点数，这样您就不必手动指定padding。如果您愿意，可以恢复此修复程序。

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

如果您出于某种原因不想使用浮点数，

display: inline-block也可以代替float: left。