Question

我已经开始使用rem来调整最近项目中的字体大小，然后使用px作为旧版IE的后备版。

我也在font-size上设置了html 62.5％，所以我可以在样式表中更轻松地设置字体大小，然后设置字体大小{{1在身体上，所以没有样式的元素有一个至少14像素的基础1.4rem，请参阅下面的代码：

font-size

问题是，Chrome似乎以一种奇怪的方式解决了这个问题...... Chrome似乎在初始页面加载时正确设置了字体大小，但在随后的刷新中，字体大小比它们应该的大。

SEE FIDDLE（HTML复制如下以供将来参考）

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }

请记住，您可能需要在Chrome中点击一次或两次以查看效果。

有人知道造成这种情况的原因或是否有解决方法？我是否通过在<!DOCTYPE html> <html lang="en-GB"> <head> <title>Page Title</title> </head> <body> This is a test, this font should have font-size of 14px. This is a test, this font should have font-size of 14px. This is a test, this font should have font-size of 14px. </body> </html>元素上设置62.5％font-size来犯罪（我发现有人反对这样做）？

Answer 1

我找到的最简单的解决方案是简单地将主体定义更改为

body {
    font-size: 1.4em;
}

因为它是身体，你不必担心复合 - 只需在其他地方使用rems。

Answer 2

尝试：

html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial;  }

似乎在刷新页面时看起来更好：）

FIDDLE

Answer 3

*选择器非常慢，作为Chrome中此错误的作者，我建议这样的解决方法，直到修复错误：

body > div {
    font-size: 1.4rem;
}

如果你总是有一个包装div;）

Answer 4

这似乎是一个Chrome错误;请参阅Issue 319623: Rendering issue when using % + REMs in CSS和/或部分合并的副本：Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem

Answer 5

是的，这是Chrome中已知的已知错误。

我找到了

html { font-size: 100%; }

似乎对我有用。

Answer 6

我解决这个问题的方法是在body-element中设置一个绝对的font-size。对于所有其他字体大小我使用rem：

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

.arbitrary-class {
    font-size: 1.6rem; /* Renders at 16px */
}

Answer 7

帕特里克的答案是对的。我们在Android 4.4.3 WebView上遇到了同样的问题。

<强>之前：

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

<强>后：

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
}

使用 em 而不是 rem ，它有效！

Chrome不尊重body标签上的rem字体大小？

7 个答案: