Chrome 中文 12px 字体限制导致 rem 设置 line-height 出错

2016/09/22 | 1分钟阅读 | 更新于 2016/09/22

Chrome 浏览器，将 html 的 font-size 设为 1px 时；基于 rem 设定的元素字体大小正常，行高是正常的12倍。这个问题只出现在 Chrome 上，然后如果 html { font-size: 100px; } 然后去设 .24rem 的话一切正常。目测跟 Chrome 中文字体大小不能小于 12px 有关。

好了，现在已经验证，把 Chrome 切成英文版就没有这个问题。来张英文版 Chrome 和中文版 Chrome Canary 下的对比 ┑(￣Д ￣)┍

下面是旧图和代码↓↓↓

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      html {
        font-size: 1px;
      }
      p.s-24 > span {
        font-size: 24rem;
        line-height: 24rem;
        background-color: #afa;
      }
    </style>
  </head>
  <body>
    <p class="s-24">
      <span>Line 1 Line 1 Line 1</span>
      <br />
      <span>Line 2 Line 2 Line 2</span>
    </p>
  </body>
</html>