【IE11バグ】mainタグがinline要素として扱われてしまう

みなさん、こんにちは。

新年あけましておめでとうございます。
今年もよろしくお願いいたします。

今年、仕事で早速IE11でバグに遭遇しました。
その内容と解決方法をまとめてみました。

そもそもmainタグとは

mainタグはメインコンテンツ部分に使うタグです。
※article、aside、footer、header、navを祖先要素に持つことは不可

ページのメインコンテンツを囲うように用いるのが一般的かと思います。

本来はblock要素なのですが、IE11ではinline要素として扱われます。
これはIE11がmainタグ自体に対応していない為です。

問題が発覚した時の症状

mainタグに「width」や「margin-bottom」を指定した時にIE11だけ反映されなかった。

解決方法

解決方法は単純です。

main {
	display: block;
}

これだけでIE11でもmainタグがblock要素として扱われるようになります。

まとめ

IE11はHTML5やCSS3に対応しているとされていますが、ちょくちょく未対応のものがありややこしいですね。

参考サイト

https://qiita.com/rukiadia/items/9c8191590dc151d6ae85