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

Question

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

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

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

在此处输入图像描述

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

对此有什么想法吗？

score 3 · Accepted Answer

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

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

http://jsfiddle.net/mjPE9/（firefox 中的默认字体为衬线字体，但如果未另行指定，输入将始终获得无衬线字体）

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

score 0 · Accepted Answer

0

于 2012-08-02T12:07:14.800 回答

2 回答 2