将根元素字体大小设置为百分比时，在 Chrome 中使用 rem 的 textarea 字体大小异常答案

【问题标题】：Unexpected font size of textarea using rem in Chrome when setting root element font size to percentage将根元素字体大小设置为百分比时，在 Chrome 中使用 rem 的 textarea 字体大小异常
【发布时间】：2020-12-31 04:08:34
【问题描述】：

将根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>

【问题讨论】：

标签： css google-chrome font-size

【解决方案1】：

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

【讨论】：

谢谢，我想我明白为什么在不同的浏览器中它可能会有所不同。但是，就我而言，即使在同一个浏览器 Chrome 中，字体大小也不同，但仍使用相同的 rem 值。
@Talha 这有点奇怪，但也许你正在调整字体大小的标签有默认字体大小，它们会影响你的字体大小。见链接：stackoverflow.com/questions/5410066/…顺便说一句，如果它是你想要的，请接受我的回答。 ;)
感谢@sm10 的帮助 - 使用 rems 时字体大小不应该来自根元素吗？
@Talha YW 兄弟，我认为是的，因为如果您查看此链接：w3schools.com/cssref/css_pxtoemconversion.asp 您可以看到它说“设置您的默认字体大小”，所以如果您想解决问题，请使用字体基础（默认）然后 rem 或百分比将是合乎逻辑的。！我在自己的项目中使用字体库，我强烈推荐给你，如果你没有设置默认大小浏览器会这样：62.5% 的大小？好吧，我们没有任何默认值所以...（浏览器有自己的默认值，并且在 chrome、firefox 中有所不同。）
再次感谢，我将其标记为已接受。我猜浏览器出于某种奇怪的原因只是在使用百分比时将 textarea 作为不同的基本字体大小。老实说，我更喜欢 Firefox 的实现，它更一致，但无论如何这是一种边缘情况，一切都很好:)。