Chrome 不尊重正文标签上的 rem 字体大小？答案

【问题标题】：Chrome not respecting rem font size on body tag?Chrome 不尊重正文标签上的 rem 字体大小？
【发布时间】：2013-12-04 16:13:32
【问题描述】：

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

我还在html 上设置了 62.5% 的font-size，以便稍后在样式表中更轻松地设置字体大小，然后我在正文上设置了1.4rem 的字体大小，所以无样式元素的基础font-size 至少为 14 像素，请参见下面的代码：

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 似乎以一种奇怪的方式处理这个问题...... Chrome 似乎在初始页面加载时正确设置了字体大小，但在随后的刷新时，字体大小比应有的大得多。

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

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
        <p>This is a test, this font should have font-size of 14px.</p> 
    </body>
</html>

请记住，您可能需要在 Chrome 中点击运行一次或两次才能看到上述效果。

有人知道是什么原因造成的，或者是否有解决办法？在html 元素上设置 62.5% font-size 是否构成犯罪（我知道有人反对这样做）？

【问题讨论】：

“我在 html 元素上设置 62.5% font-size 是否构成犯罪（我知道有人反对这样做）？”不你不是。它应该是用户设置的默认字体大小的 62.5%，如您所知，通常是 16px = 10px 的 62.5%。
我已经尝试了又尝试了，但我不能重复你的问题:(
@ExtPro 我很确定它不限于我安装的 Chrome（只是让一位同事复制了这个问题）尝试在 Chrome 中查看：jsfiddle.net/HfwSm/embedded/result 并在它之后刷新页面几次完成加载。
FWIW，我能够通过问题中描述的步骤重现这一点。
@BoltClock 谢谢 - 不要以为你有任何想法可能导致这个/如何解决？

标签： html css google-chrome

【解决方案1】：

帕特里克的回答是对的。我们在 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，它可以工作！

【讨论】：

【解决方案2】：

我解决此问题的方法是在正文元素中设置绝对字体大小。对于所有其他字体大小，我使用 rem：

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

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

【讨论】：

在基于 Chromium 的浏览器（不是 Firefox）中使用像素将忽略用户配置的字体大小。

【解决方案3】：

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

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

只要你总是有一个包装 div ;)

【讨论】：

不幸的是，除了 padding/margins 之外的所有东西都非常好（而且宽度可能也太大了，尽管我还没有检查过它们！）。
这对我来说效果更好。 * 选择器是为了让事情变得更加复杂。

【解决方案4】：

是的，这是 Chrome 中的一个已知错误，已链接。

我找到了

html { font-size: 100%; }

似乎对我有用。

【讨论】：

是的，这行得通。 Proceed like in this comment

【解决方案5】：

我找到的最简单的解决方案是将正文定义更改为

body {
    font-size: 1.4em;
}

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

【讨论】：

这对我来说似乎是最好的后备解决方案。

【解决方案6】：

这似乎是一个 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

【讨论】：

七年后这个bug依然存在。

【解决方案7】：

试试：

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

【讨论】：

这行得通，但我不愿意使用* 选择器，因为我听说它效率很低，这也意味着我必须为h1 设置字体大小，@ 987654328@等
一点也不——关于效率，请在此处阅读：calendar.perfplanet.com/2011/… 和此处的“性能”部分：paulirish.com/2012/box-sizing-border-box-ftw
应该是 em 而不是 rem wp-code.com/wordpress-snippets/…