定义为继承时，HTML 输入字体大小更大答案

【问题标题】：HTML input font-size is greater when defined as inherit定义为继承时，HTML 输入字体大小更大
【发布时间】：2021-11-07 01:35:04
【问题描述】：

我使用的是 Chrome，默认字体大小为 16px。

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

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

因此，scence 背后的想法是将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

我收到''

【问题讨论】：

【解决方案1】：

由于未设置内联样式，因此查看样式时会得到空结果。

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

值得使用浏览器的检查工具来准确查看每种样式的设置，它还会向您显示计算出的样式。

【讨论】：

【解决方案2】：

输入默认不继承，但你可以设置为通过css继承：

input{font-family:inherit;}

* {
  font-size: inherit;
}

html {
    font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
input{font-family:inherit;}

<p>Hello</p>

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

【讨论】：