firefox中的行高問題

Question

我試圖在Firefox上使搜索按鈕看起來不錯。

display: block; 
width: 60px; 
height: 60px; 
line-height: 60px !important; 
padding: 0; 
background: white; 
border: 0; 
border-radius: 30px; 
-moz-border-radius: 30px; 
-webkit-border-radius: 30px; 
-khtml-border-radius: 30px; 
font-family: 'iconic'; 
color: #bad104; 
font-size: 5em; 

它必須看起來像這樣（Chrome和IE完美地呈現我的代碼）：http://img341.imageshack.us/img341/6590/kogy.png

但是，當它的輸入提交與標誌性的字體，白色背景和邊界半徑這樣做我在Firefox上使用相同的代碼，這裏是我得到的：http://img17.imageshack.us/img17/953/jms4.jpg

我在兩個瀏覽器上查看dom檢查器，當我查看「計算值」時，它不會在chrome上顯示相同的內容-height：60px）和firefox（line-height：67px）。

一切我從現在開始嘗試爲失敗：/我希望你們會有一些幫助，我:)

謝謝！

Answer 1

您不應該使用行高來定義度量單位，這是因爲間距是相對於字體大小的。在你的例子中

line-height：60px;

應該是

行高：1;

或

線高度：100％;

正如您所指定的那樣，您希望它與字體的高度相同。

Answer 2

FF中的按鈕行高度硬編碼爲line-height: normal !important;，這意味着即使用戶定義的line-height: xxx !important也不會覆蓋它。

給這些讀：

https://bugzilla.mozilla.org/show_bug.cgi?id=349259

https://bugzilla.mozilla.org/show_bug.cgi?id=697451