CSSでマージンやパディングもrem単位で指定するとIEとchromeで表示が異なる現象の解決策

ルートのフォントサイズを参照してサイズを指定できる便利なrem単位ですが、font-size以外にもmarginやpaddingに指定するとchromeとIEで描画の差異があることがわかったのでメモしておきます。

結論からいうとこの現象はルートのフォントサイズの指定の仕方によって発生します。

/* ①差異が発生するパターン */
html {
	font-size: 6.25%;
}

/* ②発生しないパターン */
html {
	font-size: 62.5%;
}

①のパターンで指定すると実際の使用時は「10px = 10rem」のように、これまでのpx単位と同じ感覚でrem単位を使えて便利なのですが、chromeでは問題ありませんがInternetExplolerではこうしてしまうとpaddingやmarginにremで指定したサイズが適用されません。

②のパターンを適用すると「10px = 1rem」のようになってしまいますが、InternetExplolerでも、paddingやmarginに指定したremサイズがきちんと計算されて表示されるようになります。

なんとなく他の解決法もありそうな気もしますし現象の理由もよくわかりませんが・・・一応軽く検証はしたので個人的な環境に起因した問題ではないと思うのですが、ネット上を調べても同現象についての記述が見当たらなかったのが気になるところではあります。

とりあえずこれで解決するので深みにハマる前にこれでヨシ！ということにしておきます。

モバイルフレンドリーなサイト制作などで採用される傾向にあるレスポンシブデザインでは、pxやemではなくrem単位が使われることが多くなってきたので覚えておくようにしたいですね。