Firefox使用border-radius向块元素添加额外的1px

Question

奇怪的是，就在最近（也许是自更新以来？）Firefox（16.0.1）为我提供了一个额外的白色或空白像素行，其中的元素设置了边框半径。

我尝试修改很多属性，例如行高，溢出等等，但似乎没有任何工作，并且出于其他奇怪的原因，我无法在我渲染这些的框架之外重现问题纽扣。但是，我已经尝试禁用我使用的CSS重置，我已尝试使用Firebug禁用外围CSS中的某些其他值，但无济于事。

由于我不知道如何重现它，我已经整理了一个图片来证明这个问题：

有没有人遇到过这个问题并且知道可能的修复方法？

编辑：我现在也注意到其他元素也搞砸了。这绝对是一个新的发展。即使输入看似错误并为它们设置行高，也不会影响结果。请参见其他图表：

以下是在第二个图形中查看的输入字段的CSS树：

.dynamicForm-componentEdit .componentLabel input.long {
    width: 320px;
}

.dynamicForm-componentEdit .componentSettings textarea, .dynamicForm-componentEdit .componentLabel textarea, .dynamicForm-componentEdit .componentSettings input, .dynamicForm-componentEdit .componentLabel input {
    background: -moz-linear-gradient(center top , #FFFFFF 0%, #FAFAFA 100%) repeat scroll 0 0 transparent;
    border: 1px solid #CDCDCD;
    border-radius: 6px 6px 6px 6px;
    color: #666666;
    font-size: 10px;
    height: 12px;
    line-height: 20px;
    margin-bottom: 4px;
    margin-right: 8px;
    margin-top: 4px;
    padding: 2px 6px;
    width: 130px;
}
input {
    font-family: Helvetica,Arial,Verdana;
    outline: 0 none;
}
* {
    margin: 0;
    padding: 0;
}
.dynamicForm-componentEdit {
    color: #AAAAAA;
}
.interfaceBlock-content {
    color: #666666;
    font-family: Verdana;
    font-size: 11px;
}
body {
    color: #333333;
    font-family: Helvetica,Arial,Verdana,Geneva;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #000000;
    font-size: 100.01%;
    text-align: left;
}

编辑＃2：问题似乎与CSS3渐变有关。我改变了CSS：

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;

为：

background: none repeat scroll 0 0 #DDDDDD;

见图：

使用普通背景时问题消失了！

Answer 1

我可以通过应用来解决这个问题：

background-clip: padding-box

受问题影响的所有元素。

我不确定这是否是最佳方法，但绝对有效。问题是所有渐变定义都会覆盖设置 - 例如，它不能仅应用于所有DIV。

因此，正确的定义如下：

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 padding-box transparent;

如果有人能想到更优雅有效的方法，请随时发表评论或回答。

编辑：经过进一步研究后我发现padding-box确实解决了描述的渲染问题，但由于其他原因而发生了整个问题并且似乎影响了填充，这就是为什么文本在输入字段（参见上图＃2）没有垂直居中（应该如此）。

最后，我找到了罪魁祸首 - 我不太明白为什么会这样： Helvetica

一旦我切换到Arial，所有问题都消失了。

那么必须是字体渲染问题，或者字体指标中的某些内容会混淆Firefox的渲染器？

Answer 2

我的最后一个答案被删除了，我认为这是因为我在另一个任务中给出了相同的问题。因此，如果您想了解我是如何解决此问题的，请在此处查看答案：https://stackoverflow.com/a/13273215/1806644