IE11で、mainタグを使うときの注意点

  • 投稿 : 2018-09-05
Windows10 IE11で確認しました
ie11-main01.png

IE11だけスタイルがうまく反映されてないところがあったので調べてみたら、mainタグのところでした。IE11ってHTML5に対応してるはずなんじゃ?

<main> - HTML: HyperText Markup Language | MDN

Partial support refers to only the
element (added later to the spec) being "unknown", though it can still be used and styled.
Can I use... Support tables for HTML5, CSS3, etc

ここをみると、IEはmainタグ未サポート?一部対応とかいてる?!

原因

HTML5 から追加された要素 main ですが、レイアウトに導入するには注意が必要です。 IE9 ~ IE11(開発者ツール上は Edge 表記)では、main 要素の display プロパティの規定値は inline です。 したがって、ページ全体の構成を main 要素で指定する場合には、main 要素に display:block を指定する必要があります。
IE では main 要素の display は inline なので注意する – カラクリ.jp

html - IE11 is missing User Agent Style for main element (display: block;) - Stack Overflow

<main> HTML5 Tag not working in Internet Explorer 9/10/11 - Rick Strahl's Web Log

標準でblock要素にならないのが原因のようです。
inline 要素に適用できないスタイルは、反映されませんっていうのが、今回の現象のようです。

対策方法

main {
    display: block
}

スタイルシートに上記を書いておけば、問題は解決されるはず。
実際解決されました。
スポンサーリンク
タグ#CSS#code