基于十进制 REM 的字体大小未按预期工作

Question

好的，看看我能不能解释一下。

如果我将 body font-size 设置为 16px，下面的代码可以正常工作，但如果我将 body font-size 设置为 100%，它就不起作用。 （即使 100% 等于 16px）

元素“a”的字体大小应与正文相同，因此很可能是 16 像素。 元素“b”的字体大小应为 10%，元素“c”的字体大小应为 30%。

问题仅在于 Chrome 和 Vivaldi，元素“b”和“c”似乎不想通过“REM”低于 6px，而 Firefox 和 IE 很乐意将它们降低到 1 或 2 像素它的工作原理，他们俩！最终大小相同，前者为 6px。

我为此使用了 Chrome 插件 CSSViewer...和我的眼睛：P

这是一个错误吗？还是我做错了什么？我真的很希望能够让它在 Chrome 和 Vivaldi 中工作......

示例如下：

html {
  font-size: 100%;
}
#a {
  font-size: 1rem;
}
#b {
  font-size: 0.1rem;
}
#c {
  font-size: 0.3rem;
}

<div id="a">
  Hello world!
</div>
<div id="b">
  Hello world!
</div>
<div id="c">
  Hello world!
</div>

Answer 1

转到您的浏览器设置。在 Firefox 的情况下，在标准字体大小设置旁边，您会找到一个“扩展设置”按钮。当你点击它时，你会看到（除其他外）一个“最小字体大小”——在 Firefox 中为 10 像素。

所以无论你做什么，只要不改变那个设置，任何计算出来小于10px的文字都会以10px显示...

我想其他浏览器会有类似的设置。