IEではline-heightが効かない？！Internet Explorer対応の見解
Webブラウザ界の問題児Internet Explorer、通称IE。
サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。
こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応範囲とするか、はっきりさせておくのが大事です。
今回はIE11においてline-heightが効かずデザインが崩れているという事例があったので、IEへの対応についての見解を含め、解説していきたいと思います。
IEだけline-heightが効かないケースが存在する
行の高さを指定する「line-height」は全ブラウザ対応しているCSSプロパティです。
それがなぜかIEで効かないバグが存在します。
それはどういったケースか。以下が検証の内容です。
検証内容
この部分にline-heigt:50px;を指定。メイリオあり。
line-heigt:50px;メイリオなし。
上二つがpタグ、下2つがinputタグになっています。
IEで見るとインプットの下の方のline-heightが効かずに高さが低くなっているはずです。
調べてみるとfont-familyが悪さをしているのではないかという以下の記事が見つかりました。
font-family指定で一番初めに”メイリオ”を指定していない場合、line-heightが効かないことがあるようです。
記事ではIEでline-heightを使用する時にはfont-familyの一番先頭に"メイリオ"を指定しておくのがよいとありますが、今回の検証ではpタグに関しては関係ありませんでした。
inputタグに関してはline-heightの挙動がそもそもchromeなどと異なる様子。
もし他にheightやpaddingなど使用してline-height以外の方法でデザインが再現できるのであればそちらの方がよいかもしれませんね。
ご参考いただければ幸いです。
IEは無視出来るか
問題の多いIEへの対応に時間を費やすということは作業自体のコストパフォーマンスが非常に悪化します。
それについてマイクロソフト自身が公式に企業に対して使用をやめるよう警告していますし、ユーザー全体にも非推奨としました。
「Internet Explorer使わないで」開発元のマイクロソフトが警告 | ハフポスト
2021年8月17日以降Microsoft 365内でのIEのサポートも終了するとされています。
Windowsには新しくEdgeが公式ブラウザとして採用されているのでそちらを推奨しているマイクロソフトとしても早く切り捨てたいところでしょう。
「Internet Explorer」来年終了は誤解です！ でももう削除しちゃってもいいんじゃない？ - 高橋忍のにゃんともWindows - 窓の杜
ではIEは無視しても問題ないのでしょうか。
IEのブラウザシェアは世界で3%未満、日本では未だ8%以上
さすがに既にサポート終了しているIE10以下への対応は不要だと思いますが、未だにIEのシェアが数パーセントあるのが日本の現状。
上記マイナビニュースによると2020年11月時点でIEのシェアは以下の通りです。
- 世界で2.55%
- 日本で8.04%
日本で8%以上もの人がIEを利用しているという衝撃の事実。
実際にはモバイルの閲覧が半数を超えてる場合が多いのでさらに利用者は少なくなると思います。ただ、未だに根強く利用者がいるということも無視はできません。
少なくとも完全にサポートが終了し、日本でのシェアが5%を割る日までは、なんらかの方法でIE利用者へも配慮した対応をする必要がありそうですね。
IEへの対応に追われすぎる必要はない
ChromeやEdgeなんかのモダンブラウザと全く同じ表示をIEにさせようとする必要はないと思います。
全てを全く同じ表示にしようとすることはWeb全体の設計からしてナンセンスです。
IEには専用のメッセージを表示したり、別のデザインにしたり、専用ページを用意するなど配慮の方法は色々考えられます。
あくまでPCのシェアのうちの8%、全体の4%以下という方に対しての対応ということでコストから考えて対応方法をチョイスしたらよいのではないかと思います。
個人的には完全にIEが過去のものになることを望んでますが。。
冒頭でも述べたように、受注の際にどこまでを対応範囲とするかはっきりさせておき、IEは別対応となる旨をクライアントにも理解してもらうとよいですね。
最後までお読みいただきありがとうございました！
▼IE対応の際にも後から修正しやすいCSS設計にしておくと作業効率が上がります。このあたりのCSS設計の書籍も一度は必読でしょう。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
