如何解决将根元素字体大小设置为百分比时,在Chrome中使用rem导致textarea的字体大小意外
将根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>
解决方法
您正在使用百分比,因此它不是特定的像素,因此,如果在不同的浏览器中看到不同的size值,则它是正常的。 我建议您使用字体库并在其上使用rem或%,并尝试使用像素和媒体查询进行响应...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。