当定义为inherit时， HTML input font-size更大

Question

我使用Chrome浏览器，默认字体大小为16px。

我有一个想法，根据width屏幕通过媒体查询调整font-size。

我看到一些CSS专家将默认的16px字体大小调整为基于1.6rem的系统。

所以科学背后的想法是平衡1rem和10px，把所有的东西都当作rem，然后如果需要调整的话，只改变font-size，这样所有的测量结果都会以相同的比例变化。

请看下面的例子

* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}

<p>Hello</p>
<input type="text" value="Hello">

谁能解释为什么input中的font-size大于p?

如果我尝试在开发工具中获得font-size，我无法获得任何值。

如果我想通过JavaScript获取它，像这样

document.getElementsByTagName("input")[0].style.fontSize

我得到''

Answer 1

查看样式时得到空结果，因为尚未设置内联样式。

这两个hello的字体大小并没有什么不同——都是16px，但段落是Times New Roman，输入部分是Arial——这是浏览器的默认设置，至少我在Windows10的Chrome/Edge中是这样检查的。

使用浏览器的检查工具来查看每个样式的设置是值得的，它也会显示计算的样式。