Sea*_*ean 13 html css google-chrome
我已经开始rem在最近的项目中使用's来调整字体大小,然后使用px作为旧版IE的后备版.
我也设置了font-size62.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似乎在初始页面加载时正确设置了字体大小,但在随后的刷新中,字体大小比它们应该更大.
查看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中运行一次或两次以查看效果.
有人知道造成这种情况的原因或是否有解决方法？我通过设置62.5%font-size的html元素来犯罪(我意识到有反对这样做的争论)？
ran*_*dak 22
我找到的最简单的解决方案是简单地将主体定义更改为
body {
font-size: 1.4em;
}
因为它是身体,你不必担心复合 - 只需在其他地方使用rems.
尝试:
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%; }
似乎对我有用。