1

奇怪的是，就在最近（也许自从更新？）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;

看这张图：

图形编号 3

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

4

2 回答 2

3

我能够通过应用来解决这个问题：

background-clip: padding-box

到受问题影响的所有元素。

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

因此，正确的定义如下所示：

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

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

编辑：经过进一步研究，我发现填充框确实修复了所描述的渲染问题，但整个问题是由于其他原因而发生的，并且似乎影响了填充，这就是为什么输入字段中的文本（见上图 #2）是不垂直居中（应该是这样）。

最后我找到了罪魁祸首——我不太明白为什么它是一个：Helvetica

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

那么一定是字体渲染问题，或者字体指标中的某些东西弄乱了 Firefox 的渲染器？

于 2012-10-28T17:28:55.507 回答
0

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

于 2012-11-08T09:11:03.167 回答