IE11で背景画像が表示されない時の対処法

クライアントからIE11で背景画像が表示されていないので確認して欲しいとの連絡がきました。

IE11はマイクロソフトが現在もサポート対象としているバージョンです。
でも、比較的最新なので不具合が少ないように思っていました。

IE11におけるmain要素の扱いを読むとIE11ってmainタグに対応していないんですね。

知らなかったです。
いままでmainタグ何も考えずに使ってました。

ちょっと前までのコーディングでは、IE9未満にhtml5タグを対応させるよう、下記のように外部ファイルを読み込んでいました。

<!--IE9未満に読み込み-->
<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js"></script>
<![endif]-->

でも、IE11には読み込んでいませんでした。
mainタグに背景画像読み込ませるようなコーディングをしていなかったので指摘がなかったんだと思います。

参考記事にもある通りmainタグのcssにdisplay: block;を追加することで背景画像が表示されるようになりました。

main {
    display: block;
}

このmainタグ指定前は、背景が表示されないだけでなく、レイアウトもずれていました。
IEの脅威はまだ終わっていなかったんですね。。