gpt4 book ai didi

html - Chrome 不遵守 body 标签上的 rem 字体大小?

转载 作者:技术小花猫 更新时间:2023-10-29 12:29:03 30 4
gpt4 key购买 nike

在最近的元素中,我开始使用 rem 来调整字体大小,然后使用 px 作为旧版 IE 的后备。

我还在 html 上将 font-size 设置为 62.5%,这样我可以稍后在样式表中更轻松地设置字体大小,然后我设置主体上的 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 是否构成犯罪(我知道有人反对这样做)?

最佳答案

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

body {
font-size: 1.4em;
}

因为它是 body ,所以您不必担心复合 - 只需在其他地方使用 rems。

关于html - Chrome 不遵守 body 标签上的 rem 字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20099844/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com