Question

我在我网站的CSS中使用了em单位。当我在Chrome中加载网站页面时，所有文本都会以非常大的字体大小加载。如果我调整浏览器窗口的大小或加载开发人员控制台，则字体大小将恢复为“正确”大小。有时，如果我浏览网站上的页面，它会做同样的事情或行为不规律（从大的开始，有时从正常大小开始）。

我无法在Safari或Firefox中复制此内容，因此认为它一定是Chrome解释我的CSS或我的em单位的方式的问题。

有关为何发生这种情况的任何想法？如果我删除所有的em单位并使用px然后它工作正常（这可能是一个解决方案，但不能帮助我理解它）。

（使用：Chrome 32，Macbook Air，OS 10.8.5，自定义Wordpress主题）。

一些CSS：

body {
    margin: 0 auto;
    color: #404040;
    font-family: sans-serif;
    font-size: 1.6rem; 
    line-height: 1.5;
    padding: 1em; }

（如果我在这里使用font-size:16px它会正常工作，但那么em / rem的重点是什么

Answer 1

我遇到了与你实际相同的问题。我最近开始使用rem代替em而且它更好，因为你不必担心嵌套元素，例如列表项，乘以值。但是，我注意到字体加载太大，然后调整大小。

在我的CSS中，我最初使用以下方法重置了字体：

html { font-size: 62.5%; }

你可能已经意识到了原因，但这只是意味着1em等于10px。然后我在正文中使用font-size: 1.4rem将基本字体大小设置为14px。

要解决您提到的问题：

尝试将html字体大小设置为 10px ，而不是百分比值，然后使用rem。无论如何似乎对我有用。

Answer 2

CSS3引入了一些新的单元，包括rem单元   为“根em”。

em单位相对于父级的字体大小，这会导致   复合问题。 rem单位是相对于根或   HTML元素。这意味着我们可以在上面定义一个字体大小   html元素并将所有rem单位定义为该百分比。

你可以尝试font-size: 1.6em; /* EM not REM */但是无论如何它可能无效，只要1em等于当前的字体大小。

您可以使用px代替或在体内设置px并使用em。

Answer 3

需要更多信息。我们将非常感谢实时网址。

无法仅使用此代码重现：

body {
    margin: 0 auto;
    color: #404040;
    font-family: sans-serif;
    font-size: 1.6rem; 
    line-height: 1.5;
    padding: 1em; }