奇妙なことに、最近 (おそらく更新後?) Firefox (16.0.1) では、border-radius が設定された要素内に追加の白または空白のピクセル行が表示されます。
line-height、overflow などの多くのプロパティを変更しようとしましたが、何も機能していないようで、他の奇妙な理由により、これらのボタンをレンダリングするフレームワークの外で問題を再現できません。ただし、使用しているCSSリセットを無効にしようとしました.Firebugを使用して、外側のCSSの他の特定の値を無効にしようとしましたが、役に立ちませんでした.
再現方法がわからないので、問題を示すグラフィックをまとめました。
誰かがこの問題に遭遇したことがあり、可能な修正を知っていますか?
編集：他の要素も台無しになっていることに気づきました。これは間違いなく新しい展開です。入力が間違っているように見え、行の高さを設定しても結果には影響しません。追加の図を参照してください:
2 番目の図に表示されている入力フィールドの 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;
次の図を参照してください。
通常の背景を使用すると問題が解消されます!