Chromeでfont-sizeにremを使った時に、フォントサイズが大きくなる問題

「rem」は、CSS3のfon-size 単位。
親要素に継承されず、ルート(html)からの相対サイズが指定出来るので、
とても便利なのですが、Chromeでフォントサイズが大きくなる現象があります。。(涙)

どんな時にフォントサイズがおかしくなるのか?

html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}

こう書いた時に、bodyの文字サイズは62.5%が無効になり100%(デフォルトサイズ)に対して1.6remになってしまいます。
ただ、classやpなどで別でサイズ指定している所は正常なサイズ。

bodyが継承されいる(個別指定していない)要素は大きいサイズで表示されてしまいます。

解決方法

bodyにサイズ指定するなら相対指定をする。

body {
font-size: 1.6em;
}

bodyもルート要素の為、remをemにしても影響はないです。
それ以外のセレクタはremでOK

他サイトでJavascriptで解決している物もありましたが、これがscript使わず一番簡単な方法だと思います。

Chromeさんは本当にフォントトラブルが多い。。

▼参考サイト
http://n2p.co.jp/blog/tech/chrome-fontsize/



【関連記事】
chromeのバグによりfloatしたナビゲーションのレイアウトくずれ問題
http://d.hatena.ne.jp/soratomo0714/20150521/