文本輸入內部的不同字體渲染？

我有一個輸入字段應該看起來像正常的正文。它沒有特別指定。在我的CSS重置我有這個...文本輸入內部的不同字體渲染？

input, textarea, button, select { 
    margin: 0; 
    font-size: 100%; 
    line-height: normal; 
    vertical-align: baseline; 
}

輸入字段裏面的文字比上面的更大...看我的例子截圖。下行是一個輸入字段，即上行正常文本。

enter image description here

這種情況發生在所有的瀏覽器。如果我將font-size的輸入更改爲97%，那就是對的。然而，我根本不明白爲什麼文本輸入調整字體大小？

對此有何看法？

2012-08-02 matt

您還需要在輸入中設置字體大小，因爲它不會直接從主體繼承。

這是因爲較新的瀏覽器將使用它自己的基本樣式表來格式化輸入。

http://jsfiddle.net/mjPE9/（在Firefox默認字體將是襯線，但投入總是會得到sans-serif字體，如果沒有指定不同）

如果你使用Firebug，你可以看到這一切的用戶代理樣式瀏覽器設置，如果你選中樣式選項卡下拉菜單中的顯示用戶代理樣式。使用的文件是forms.css - 你可以很容易地在你的系統上找到它，並檢查它在幕後發生的事情。

2012-08-02 11:54:29 easwee

WTF，我怎麼沒有看到這是一個不同的字體？對不起，感謝你的提示。現在工作正常。 +1 – matt 2012-08-02 11:58:24

http://jsfiddle.net/akhurshid/gxXtb/ – 2012-08-02 11:59:42

@matt - np - 我第一次看到這個，我不知道發生了什麼。接受答案，如果它幫助你。 – easwee 2012-08-02 12:01:45

2012-08-02 12:07:14 williamtell

這將如何幫助？ – skos 2012-08-02 12:08:27

回答