文本输入中的不同字体渲染？答案

【问题标题】：Different font-rendering inside text-inputs?文本输入中的不同字体渲染？
【发布时间】：2012-07-31 09:14:53
【问题描述】：

我有一个应该与正常正文完全一样的输入字段。它没有任何特殊规定。在我的 css 重置中，我有这个……

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

输入字段内的文本比上面的大……见我的示例截图。下面一行是输入框，上面一行是普通文本。

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

对此有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

http://jsfiddle.net/mjPE9/（firefox 中的默认字体为 serif，但如果没有另外指定，输入将始终使用 sans-serif 字体）

如果您使用 Firebug，如果您在样式选项卡下拉菜单中选中显示用户代理样式，则可以看到浏览器设置的所有这些用户代理样式。使用的文件是 forms.css - 如果您进行搜索，您可以轻松地在系统上找到它并检查它在幕后发生的事情。

【讨论】：

【解决方案2】：

【讨论】：