chrome中body使用rem失效

我知道很多人已经开始使用 rem 作为项目中的单位了。但是遗憾的是，在 Chrome 和 Opera 上，如果我们给 body 元素应用了 rem，那么这个取值将会计算错误。

假设我们有如下代码：

  1. html {
  2.   font-size: 62.5%;
  3. }
  4. body {
  5.   font-size: 1.4rem;
  6. }

因为大部分浏览器的默认字号都是 16px，所以 html 的字号计算出来应该是 16px * 62.5% = 10px。此时，我们预期 body 的 font-size 为 14px。然而实际情况与我们想象的不太一样，最终 body 的计算值并不是 14px，它忽略了 html 的定义，而是直接使用了浏览器的默认字号作为参照。于是最终计算值为：16px * 1.4rem = 22.4px。测至 chrome 45.0 和 Opera 33.0 仍然存在这个问题，不过 chrome 49.0 和 Opera 37.0 看起来已经被修复了。

为了有效的绕过这个问题，并且实现相同的效果，我们可以将代码修改如下：

  1. html {
  2.   font-size: 62.5%;
  3. }
  4. body {
  5.   font-size: 1.4em;
  6. }

由于 body 是 html 的直接子元素，所以此时对 body 使用 em 与 rem 的效果是相同的。