按鈕高度不一致（跨瀏覽器）

我在設置按鈕高度時出現問題。基本上我無法設法跨瀏覽器。使用Firefox，它高於正常，沒有任何原因。按鈕高度不一致（跨瀏覽器）

這是截圖（火狐，Safari和Opera，以這個順序）：

Initial

這裏代碼：http://jsfiddle.net/TMUnS/2/

我也想加入我的發現了一些具體的聲明網絡，但實際上他們只是減少了高了一點，但儘管如此，他們是不一樣的（以相同的順序）：

Second try

而這裏的代碼：http://jsfiddle.net/TMUnS/4/。

我該如何解決這個問題？

來源

2012-02-08 entropid

嗯，這只是發生，這個問題已被無休止地問。由於瀏覽器的不一致性，大部分時間內輸入和像素完美不能很好地混合。我建議你從** normalize.css **開始，然後從那裏調整。 – elclanrs 2012-02-08 01:53:28

我已經有一個重置，但似乎沒有重置這個東西。 – entropid 2012-02-08 02:07:55

Firefox有這個有趣的東西叫做-moz-focus-inner。我不完全知道什麼是對的，我只知道，你有時需要爲此獲得按鈕的行爲：

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner { 
    padding:0; 
    border:0; 
}

這可能是你所需要的。你可以在這裏看到區別（在Firefox中）：http://jsfiddle.net/TMUnS/9/

來源

2012-02-08 01:57:30

嗯，實際上我設置了這個屬性，但我忘了添加'padding：0'部分，所以它不能正常工作！但現在我有一個新問題，你可以在這裏看到：http://jsfiddle.net/TMUnS/12/。按鈕具有相同的高度，但在Firefox中，它不是垂直方向。 – entropid 2012-02-08 02:11:28

我沒有看清你的問題。有些事情要注意：1）你剛剛鏈接的演示不包含'-moz-focus-inner'代碼2）你沒有指定'font-family'。我在Chrome VS Firefox中獲得了不同的默認字體，所以渲染效果不同。 3）'

我想這是取決於。謝謝你的提示。 :) – entropid 2012-02-08 02:22:55

您使用的CSS重置？ CSS重置規範化瀏覽器的CSS。

嘗試這個銳復位： YUI CSS RESET

來源

2012-02-08 01:51:55 thisisablock

我已經在使用CSS重置：http：//meyerweb.com/eric/tools/css/reset/。 – entropid 2012-02-08 01:53:54

這是在Firefox這限制按鈕的行高的特徵集。它爲按鈕設置默認行高度 - http://www.cssnewbie.com/input-button-line-height-bug/。我會嘗試使用固定高度的按鈕和周圍的填充。

來源

2012-02-08 01:54:53

是的，這是你能做的最好的。固定高度和相同的線條高度以垂直居中文本。我已經使用這種技術與搜索按鈕接觸文本輸入，所以重要的是它在所有瀏覽器中看起來一致。 – elclanrs 2012-02-08 02:17:26

按鈕高度不一致（跨瀏覽器）

回答

相關問題