Question

我将html字体大小设置为6.25％，以便1px = 1rem。我的网站在firefox中运行完美，但是当我在chrome中打开它时，除了字体大小太大以外，所有其他内容都没有。在rem中设置的宽度，高度，填充都是6倍大。

请查看提供的jsfiddle或以下代码：

<html>
<head>
    <title>test</title>
    <style>
      html {font-size: 6.25%;}
      div {
        padding: 10rem;
        width: 50rem;
        height: 50rem;
        background-color: chocolate;
      }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

如果您在Firefox中打开它，则会得到this which is expected.

但是，如果您使用Chrome浏览器you get this.打开代码，

您可以看到chrome版本的尺寸是原来的6倍，导致宽度和高度为300px，而不是50px。是什么原因造成的，我该如何解决该问题？

谢谢。

Answer 1

Google再次成为障碍（针对W10版本69.0.3497.100（正式版本）（64位））：

检查Chrome设置并调整浏览器的最小字体大小。将滑块最小化，您会看到一个很小的示例文本，大小为6px。检查该文本，您将看到内部Chrome css text_defaults_md.css的81.25％正文字体大小以6px的大小“计算”。

除非您将:root 或 :root.font-size更改为HTML中的某些硬编码值，否则Chrome似乎在所有情况下都仅对HTML html.font-size使用此最小值文档（在您的情况下为1px）。百分比（相对值）不起作用。

这是否是有选择地完成的，不能说是错误还是某些程序员的逻辑，但是，对我而言，这似乎不是标准的。

唯一的选择（解决方法）是将div字体大小更改为1px，并使用em而不是rem。

来自Chrome的HTML字体大小设置为6.25％的rems的计算值是Firefox的六倍

1 个答案: