Chrome rem bug
2024-10-19 23:26:42
遇到一个bug，发现chrome在初始化页面的时候，会错误的渲染rem单位，导致字体过大。
比如：
正常的应该是这样的：
原因是，为了使用rem单位，我们常常将 html 的font-size设置为62.5%，这样会比较方便计算。
通常浏览器的默认字号是16px，这个是chrome的。如此算来，16*62.5%=10px，这样就很方便我们使用rem单位计算各种font-size了。
所以通常现在的css reset部分会有这样的设置：
html {
font-size: 62.5%; /* 62.5% of 1em (16px) = 10px = 1rem*/
}
body {
font: 16px/1.618 Arial, Sans-serif; /* Pixel Fallback */
font-size: 1.6rem; /* Font-sizing with rem unit */
}
但是问题是chrome在某个地方除了个bug，忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来应该渲染成16px的字体，被渲染成了16*1.6=25.6px大小了。但是刷新页面之后就正常了
这个bug从chrome 31版本就出现了，到现在的chrome 42，依然存在——chromium issues 470449。
解决方法
有一些简单的解决方法可以规避这个bug：
<script type="text/javascript">
document.body.style.fontSize = '1.6rem';
</script>
或者将下面的代码放到 head 里面：
<style>
body {
font-size: 1.6rem;
}
</style>
当然这些都是很不优雅的方法，基本思路就是让页面repaint一下。
最终问题的解决还是要依赖Google了。这么久不解决这个bug，是要逼我们放弃62.5%改用100%从而提高大家的心算能力的么？
嗯，使用了rem就意味着不考虑IE 8及其之前的IE浏览器了，IE9和IE10要用rem的话，不能用font属性简写。
最新文章
- iscroll5 上拉，下拉 加载数据
- 增强学习（四） ----- 蒙特卡罗方法(Monte Carlo Methods)
- SharePoint2013 此产品的试用期已结束
- [MongoDB] 高可用架构方案
- C++:运算符重载函数
- 使用Win32/ATL建立窗口的过程
- webService学习记录
- ASP.NET操作DataTable
- windows server 2003 AD
- keil禁止给uncalled segment分配空间
- 转： AlphaImageLoader简介
- 使用简单的 5 个步骤设置 Web 服务器集群
- 自学Aruba1.1-Aruba体系结构-产品线
- 安卓高级2 Volley框架的使用案例
- SQLServer之创建唯一聚集索引
- python基础学习（七）列表
- C#-方法（八）
- POJ 3522 Slim Span(极差最小生成树）
- VMWare ESX/ESXi 虚拟机硬盘的厚置备(Thick Provision)与精简置备(Thin Provision)的转换
- php新特性：trait 关键字使用