如何糾正webkit瀏覽器和Firefox之間的輸入元素的行高不一致？

您將在註冊表格見右在我的電子郵件禮服輸入字段垂直對齊很尷尬的文本頁面的中間，而在Chrome，Safari和IE（喘氣）一切都很好。

什麼導致這種不一致的Firefox和我應該如何補救它？

上sponsor.css你有div#sponsor-notify-me input#email-field有這個padding:10px 10px 0;只是將其更改爲padding:0 10px 0;，改變它的height:32px;到height:42px;

2010-08-30 16:27:44 Sotiris

非常好 - 謝謝。 – 2010-08-30 16:44:54

這種類型的解決方案效果很好，除非您需要支持多於一行的文本。 Webkit，Opera和IE在這方面的表現完全相同。我想知道爲什麼Firefox是不同的。 – donut 2012-06-19 17:22:51

所有瀏覽器都有許多元素的默認樣式，它們並不完全一致，所以最好的方法是使用CSS重置樣式表來刪除所有這些默認CSS規則。

唯一的「缺點」是在包含重置之後，您可能必須添加更多的規則，因爲您可能使用了瀏覽器的某些默認樣式，例如標題大小。

我一直在使用YUI 3 CSS Reset，它工作得很好，但一定要將它包含在CSS之前。

2010-08-30 16:24:41 alcuadrado

我使用Eric Meyer的重置在我的主要樣式。 – 2010-08-30 16:39:05

基於Firefox和WebKit瀏覽器治療的line-height不同，這會影響輸入元素。對我而言，一種解決方法是在每個元素的css屬性中爲行高和高度使用相同的值。

例如

#button{   
    vertical-align: middle;   
    line-height: 60px; 
    height: 60px; /* Firefox needs this to be equal to height */ 
}

2012-05-31 15:39:15

回答