IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

font-sizeを相対指定してChromeだけフォントが大きく表示されてしまう問題

フォントサイズを以下のように相対指定で書いたときに、Chromeだけフォントが大きく表示されてしまうことがありました。

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

62.5%が無視されて、font-size:100%;に対して1.6remで表示されてしまっているようにみえます。なぜかChromeだけ。

なんとかしたいというわけで調べてみたところ、スクリプトを追記すれば対応できるという記事がちらほら。
でも、フォントサイズを相対にするだけでスクリプトが必要になるってちょっとやだなーと思ってもうちょっと調べてみたところ辿りついた英語だらけのページをそれなりに解釈して、以下の記述で解決できました。

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

[参考サイト]
Chrome not respecting rem font size on body tag? (stackoverflow)