【CSS】IE11でremを使う場合の注意点(疑似要素でのline-heightバグ)

文字サイズにアクセシビリティを求める場合はremを使うという記事を投稿しました。

2022.06時点で既にシェアは1割未満なのでIEに関するバグはほとんど無視しても良いのかもしれませんが…

場合によってはまだ考慮する場面もあるかもしれませんので
メモとして記事化しておきます。

※Windows10のIE11は2022年6月15日(日本時間6月16日)にサポート終了。2023年2月14日に完全無効化予定(EdgeのIEモードは2029年までサポート予定)

※Windows7(ESU)、Windows8.1、Windows10 LTSC、Windows ServerではIE11が引き続き提供される。(Windows7(ESU)は2023年1月10日有償サポート終了Windows8.1は2023年1月10日延長サポート終了

IE11のrem指定で起きるバグ

IE11では疑似要素(:before、:after)に対して行高(line-height)をremで指定しても正しくレイアウトされないようです。

1行のテキストの場合、
要素の高さ(height)と行高(line-height) を同じ値にして
縦方向の中央寄せ(センタリング)をすることがありますが、これが出来ないということになります。

その他のIE11関連のバグもコチラに紹介されています。
https://kiomiru.co.jp/blog/coding/ie11-bugs/

参考:https://www.webmagazine.kakisiti.co.jp/?p=571
https://www.qbook.jp/column/20220720_1391.html
https://kiomiru.co.jp/blog/coding/ie11-bugs/
https://ja.wikipedia.org/wiki/Internet_Explorer_11

関連記事

コメントを残す

*