Question

我有一个输入字段应该看起来像普通的正文。它没有任何特殊的指定。在我的css重置中我有这个......

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

输入字段内的文字大于上面的文字...请参阅我的示例屏幕截图。下面一行是输入字段，上面是正常文本。

enter image description here

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

对此的任何想法？

Answer 1

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

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

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

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

Answer 2