将根元素字体大小设置为百分比时，在 Chrome 中使用 rem 的文本区域出现意外字体大小

Question

将根 font-size 设置为 62.5% 或任何其他百分比时，Chrome 将 textarea 字体大小呈现为 16.25px。我希望它是 20px 就像呈现 div 字体大小一样。此外，在 Firefox 中，div 和 textarea 都呈现在 20px。我有点困惑为什么这会出现在 Chrome 中。 rem 值不应该始终基于根元素吗？

请注意，将根元素 font-size 设置为固定的像素数量，一切都会按预期进行。

顺便说一句，我在 Windows 10，但不确定 Mac 是否会发生这种情况。另外，我想我可以切换到使用像素，但是我希望使用基于百分比的大小，这样我就可以保持用户的字体大小偏好。

<html style="font-size: 62.5%">
<body>
    <div style="font-size: 2rem">asdf</div>
    <textarea style="font-size: 2rem">asdf</textarea>
    </body>
</html>

更新：当我将根上的字体系列更改为等宽字体以外的任何字体时，它似乎可以找到。只有使用等宽字体才会出现此问题。仍然对为什么会发生这种情况感到困惑...

<html style="font-size: 62.5%">
<body>
    <div style="font-size: 2rem">asdf</div>
    <textarea style="font-size: 2rem; font-family: sans-serif">asdf</textarea> <!-- 20px -->
    </body>
</html>

Answer 1

您使用的是百分比，因此它不像像素那样具体，所以如果您在不同的浏览器中看到不同的大小值，这是正常的。我建议您使用字体库并在其上使用 rem 或 % 并尝试使用像素和媒体查询来响应...

将根元素字体大小设置为百分比时，在 Chrome 中使用 rem 的文本区域出现意外字体大小

Unexpected font size of textarea using rem in Chrome when setting root element font size to percentage

css

google-chrome

font-size