css - 文本输入中的不同字体渲染？

Question

我有一个输入字段，它看起来应该与正常的正文文本完全一样。 它没有任何特别指定。在我的 css 重置中，我有这个......

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

输入字段中的文本比上面的要大……请参阅我的示例屏幕截图。下面一行是输入框，上面一行是普通文本。

这发生在所有浏览器中。如果我将输入的 font-size 更改为 97%，那将是正确的。但是我根本不明白为什么文本输入会调整字体大小？

有什么想法吗？

Answer 1

您还需要在输入上设置字体大小，因为它不会直接从主体继承。

这是因为较新的浏览器将使用它自己的基本样式表来格式化输入。

http://jsfiddle.net/mjPE9/ (firefox 中的默认字体是衬线字体，但如果没有不同的指定，输入将始终使用无衬线字体)

如果您使用 Firebug，您可以在“样式”选项卡下拉列表中选中“显示用户代理样式”，从而看到浏览器设置的所有这些用户代理样式。使用的文件是 forms.css - 您可以在您的系统上轻松找到它，如果您进行搜索，可以检查它在幕后发生了什么。