微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – Chrome不符合body标签上的rem字体大小?

我已经在最近的项目中使用了rem的尺寸字体,然后使用px作为旧版本的IE的后备版本.

我还在HTML上设置了一个62.5%的字体大小,所以我可以稍后在样式表中更容易地设置字体大小,然后在body上设置一个1.4rem的字体大小,因此未分类的元素有一个基本的字体 – 尺寸至少为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> 
    </body>
</html>

请记住,您可能需要在Chrome中运行一次或两次以查看所述效果.

有谁知道是什么导致这个或者是有办法吗?我通过在html元素上设置一个62.5%的字体大小写我犯罪(我意识到有人反对这样做)?

解决方法

尝试:
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

原文地址:https://www.jb51.cc/html/230102.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐