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;が反映されないことが確認できる。
おまけ
remはMedia Queriesで使うと正しく適用されないことがあるため注意が必要。
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
私が最近読んだそのほかのrem関連記事
- REM vs EM – The Great Debate
- Use rems for global sizing, use ems for local sizing
- Use `rem` for Global Sizing; Use `em` for Local Sizing
- PX, EM or REM Media Queries?