最近CSSのremについての記事をよく見るがIE10以下では注意が必要

最近CSSのremについての記事をよく見るがIE10以下では注意が必要

IE10以下ではremは使えないことがある

最近CSSのremについての記事をよく見かける。remはemと違ってroot要素のフォントサイズを継承するためemのように直近の親からの継承によってフォントサイズが変更されてしまうことがないため便利だ。

しかし、IE10以下では注意がremのフォントサイズが反映されないことがあるため注意が必要だ。

とはいっても普通にfont-sizeでremを指定すれば反映されないということはない。(ただし、IE8以下では未対応

問題はfontプロパティ(ショートハンド)で以下のように指定したときだ。

以下のようにfont-sizeではなくfontでremを指定するとIE10とIE9では指定したフォントサイズが反映されない。

body {
  font-size: 62.5%;
}
h1 {
  font: 10rem Arial;
}

ちなみにArialが指定されているのはfontプロパティ(ショートハンド)で指定する際はfont-familyも指定しないと全ブラウザで反映しないからだ。

以下のサンプルをIE10以下で閲覧するとfont: 10rem Arial;が反映されないことが確認できる。

font: 10rem Arial;を使用したサンプル

おまけ

remはMedia Queriesで使うと正しく適用されないことがあるため注意が必要。

[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

私が最近読んだそのほかのrem関連記事