rem Chrome bug：以 rem 設定的字體在 Chrome 瀏覽器中怪怪的

抓 bug 時間

rem 就不多介紹了。這是 CSS3 新增的文字相對單位（root em），顧名思議，它是相對於 HTML 的根節點。

步驟一：很多人試了「步驟一」就解決這個問題了。但是我仍然試不出來。

html {
    font-size: 100%;
}
 
body {
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    color: #444;
}
 
.targetDiv {
    font-size: 1.2rem; /* Renders at 16px */
}

後來，使用 JS 手段，成功解決。

<script type="text/javascript">
  document.getElementsByTagName('html')[0].style.fontSize = '100%';
  document.body.style.fontSize = '1.0rem';
</script>

參考資料

Fix the Font size bug in Google Chrome