【发布时间】：2012-10-28 16:44:46
【问题描述】：
奇怪的是，就在最近（也许是更新之后？）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;
看这张图：
使用普通背景时问题消失！
【问题讨论】：
-
请发布足够多的 CSS 以至少尝试复制该问题。
-
这是使用
button的图像CSS：jsfiddle.net/h7MAB 显然，它看起来不一样；对我来说，line-height看起来不对（应该是10px？）；是否还有其他尚未显示的样式属性？ -
我正要发布更多的 CSS 代码 - 我会先尝试上述建议。编辑：这个问题绝对不是由我尝试 8px 的特定边框半径引起的，也尝试了不同的高度，但无济于事 - 我会在一分钟内发布更多 CSS。
-
你也可以尝试设置一个
background-color，也许是background-color: red;，它显示它是否是背景。我没有看到线性渐变是“重置”，我认为其他人建议这样做，主要是因为渐变的顶部不是相同的颜色（浅灰色与白色）。 -
使用 Firebug，您还可以查看
Computed选项卡并查找#fff或white的任何内容。这绝对是白色的。同时寻找其他border-设置。
标签： css firefox rendering pixel