IE10/11 のバグを考えると CSS では rem 単位を使わない方が良い

IE10/11 のバグにより、疑似要素 (:after、:before) と行高 (line-height) を組み合わせるとレイアウト崩れを生じます。IE11 やそれ以下のバージョンのシェアが無視できるほど低くなるには何年か掛かるでしょうから、CSS で rem 単位はあまり使わない方が良いかもしれません。

rem とは

rem とは CSS でサイズを指定する時に使用する単位です。
px、em、%、pt 等と同様に rem という単位が存在します。

絶対的なサイズを指定する場合には px を使用します。
相対的なサイズを指定する場合には em (または %)、rem を使用します。

rem は em や % と同様に 相対的なサイズ
指定するために使用できる単位です。

em


html { font-size:10px; }
div { font-size:1.4em; }


<div>
em
<div>
em
<div>
em
<div>
em
</div>
</div>
</div>
</div>

上記は em を使用した例です。

html要素最初の基準として
文字サイズを 10px と指定しています。
div要素 では 相対的
基準の 1.4 倍の文字サイズを指定しています。

em でサイズを指定する場合の基準は親要素です。
つまり、HTML文書の始まりである html要素が
最初の基準となるため、1段目の div要素では
文字サイズが基準の 1.4倍の 14px となります。

2段目の div要素では、1段目の div要素が
その親要素 (=基準) となります。
よって、文字サイズは 14px の 1.4倍で
19.6px と計算されます。

入れ子 (=ネスト) が深くなる毎に、
基準も相対的に変わっていき、相対的なサイズ指定は
重ねて (重畳的に) 適用されます。

rem


html { font-size:10px; }
div { font-size:1.4rem; }


<div>
rem
<div>
rem
<div>
rem
<div>
rem
</div>
</div>
</div>
</div>

上記は rem を使用した例です。

rem では基準は常にルート要素 (html要素) となります。
rem とは root em の略で、
ルート要素で指定したサイズを基準にして
各所でのサイズ指定が計算されます。

em と同様に 1.4倍を指定していますが、
入れ子が深くなっても、常にルート要素の
文字サイズである 10px を基準として、
その 1.4倍の 14px と計算されます。

IE10/11 のバグ

Microsoft へのバグ報告がなされているように、
IE11、あるいは以下では疑似要素 (:before、:after) に
対して行高 (line-height) を rem 単位で指定しても
正しくレイアウトされません。

https://connect.microsoft.com/IE/feedback/details/776744

文字サイズ (font-size) 、行高 (line-height) 、
文字間 (letter-spacing) などは文書レイアウトにおける
基本プロパティなのでちょっと困りものです。

また、1行のテキストであれば、要素の高さ (height)
と 行高 (line-height) を同じ値にすることで
縦方向の中央寄せ (センタリング) ができますが、
rem 単位を使用する場合、 IE の疑似要素では
この手法を使えないことにもなります。

まとめ

Windows 10 では新しい Webブラウザとして
Microsoft Edge (開発コードネームは
Project Spartan) が提供されますが、
レガシー Webサイト向けには IE11 が提供されます。

IE11、あるいはそれ以下のバージョンのシェアが
無視できるほど低くなるには何年か掛かるでしょうから、
疑似要素 (pseudo element) と行高 (line-height)
を組み合わせるとレイアウト崩れになる状態がしばらくは続く事になります。

CSS で rem 単位はあまり使わない方が良いかもしれません。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*