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

问题描述 投票：0回答：8

我开始在最近的项目中使用 

rem
来调整字体大小，然后使用 px 作为旧版本 IE 的后备。

我还在

font-size
上设置了62.5％的
html
，这样我以后可以在样式表中更轻松地设置字体大小，然后在主体上设置
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 中点击运行一次或两次才能看到上述效果。

有谁知道是什么原因造成的或者是否有解决方法？我在 

font-size
元素上设置 62.5% 
html
是否构成犯罪（我知道有人反对这样做）？

html css google-chrome
8个回答
22
投票

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

body {
    font-size: 1.4em;
}

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

9
投票

尝试：

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;  }

刷新页面看起来更好看:)

小提琴

5
投票

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

我发现了

html { font-size: 100%; }

似乎对我有用。

4
投票

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

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

前提是你总是有一个包装 div ；）

3
投票

这似乎是 Chrome 的一个 bug；请参阅问题 319623：在 CSS 中使用 % + REM 时出现渲染问题，和/或部分合并的重复项：问题 320754：如果 html 的字体大小为百分比，正文为 rem，则字体大小不会继承

2
投票

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

0
投票

我解决这个问题的方法是在 body 元素中设置绝对字体大小。对于所有其他字体大小，我使用 rem:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
}

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

尝试使用display: flex;在文本块 div 或 span 内

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.