Web制作にて、mainタグを使用してコーディングした場合、Internet Explorerで思わぬレイアウト崩れが発生することがあります。
原因と解決法をご紹介します。
mainタグ使用時のレイアウト崩れ：原因
原因はズバリ、IEではmainタグがブロックレベル要素として扱われない点にあります。
そのため、mainのwidthやheight指定が無視されてしまうわけですね。
初歩的ですが、見落とすとレイアウトが崩壊してしまうので要注意。
IE以外のブラウザでも同じ状態を確認するには、CSSでmainタグにdisplay:inlineを指定し、Chromeなどで実装サイトを閲覧してみましょう。
このCSS指定でレイアウトが崩れてしまっている場合には、以下の解決法の実行が必須です！
mainタグ使用時のレイアウト崩れ：解決法
解決法はシンプルで、mainタグにdisplay:block指定すればOK。
main {
display: block;
}基本、Webサイト制作ではほぼマストでmainタグを使用することになるかと思うので、IE対応させる場合は、上記のCSS指定は必須としておいて良いと思います。
それでは！