rem Chrome bug：rem单位的字号在Chrome浏览器中过大

rem作为CSS3新增的一个相对单位（root em，根em），它是相对于HTML根节点，这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

但是，用过之后就知道它会出现一个问题：用Chrome打开网站，在初始化页面时，有时候会出现字体很大的情况。但是刷新一下页面就好了。如下图所示：

之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px，以方便我们使用rem单位计算各种font-size。

因此，我们在html中通常做了如下设置：

html { font-size:62.5%; /*10÷16×100% = 62.5%  1rem = 10px */}
body { font:16px/1.5 Arial, Sans-serif; font-size:1.6rem; }

但是，Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来1.6rem应该渲染成16px的字体，却被渲染成了16*1.6=25.6px大小了。但是刷新页面之后就正常了。

解决方法：

将单位为 rem 的字号在 body 下面的子元素中声明。如在我所写的页面中 #wrapper 是 body 的子元素，那么我就将 CSS 属性 font-size:1.6rem 放到 # wrapper中，具体代码如下所示：

html { font-size:62.5%; }
body { font:16px/1.5 Arial, Sans-serif; }
body #wrapper { font-size: 1.6rem;  }

参考资料：
Font size too large until refresh in Google Chrome
Fix the Font size bug in Google Chrome