Html Chrome 不尊重 body 标签上的 rem 字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20099844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome not respecting rem font size on body tag?
提问by Sean
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
我已经开始rem在最近的项目中使用's 来调整字体大小，然后使用 px 作为旧版本 IE 的后备。
I've also been setting a font-sizeof 62.5% on thehtmlso I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4remon the body so unstyled elements have a base font-sizeof at least 14 pixels, see the code below:
我还设置了font-size62.5% 的 ahtml以便稍后我可以更轻松地在样式表中设置字体大小，然后我1.4rem在 body 上设置字体大小，以便无样式元素的基数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; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
问题是，Chrome 似乎以一种奇怪的方式处理这个问题……Chrome 似乎在初始页面加载时正确设置了字体大小，但在随后的刷新中，字体大小比应有的大得多。
SEE FIDDLE(HTML copied below for future reference)
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>
Remember, you might need to hit run once or twice in Chrome to see said effect.
请记住，您可能需要在 Chrome 中点击运行一两次才能看到上述效果。
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-sizeon the htmlelement (I realise there are arguements against doing so)?
有谁知道是什么原因造成的，或者是否有解决方法？我是否通过font-size在html元素上设置 62.5%来犯罪（我意识到有人反对这样做）？
采纳答案by SW4
回答by randak
The easiest solution that I have found is to simply change the body definition to
我发现的最简单的解决方案是简单地将主体定义更改为
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
因为它是身体，所以你不必担心复合——只需在其他地方使用 rem。
回答by Bran van der Meer
The *selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
该*选择是非常缓慢的，因为在Chrome这个bug的作者，我建议这样的解决办法，直到错误是固定的：
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
只要你总是有一个包装 div ;)
回答by mgkrebbs
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
这似乎是一个 Chrome 错误；请参阅问题 319623：在 CSS 中使用 % + REM和/或部分合并的副本时的渲染问题：问题 320754：如果 html 的字体大小为百分比，正文为 rem，则字体大小不会继承
回答by cornishninja
Yes, this is a known bug in Chrome, which has been linked already.
是的，这是 Chrome 中的一个已知错误，已经链接。
I found
我发现
html { font-size: 100%; }
seems to work for me.
似乎对我有用。
回答by Patrick
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
我解决这个问题的方法是在 body-element 中设置一个绝对字体大小。对于所有其他字体大小，我使用 rem：
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}
回答by sagix
The answer of Patrick is right. We have the same issue on Android 4.4.3 WebView.
帕特里克的答案是正确的。我们在 Android 4.4.3 WebView 上也有同样的问题。
Before:
之前：
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
之后：
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With emand not rem, it works !
使用em而不是rem，它可以工作！
