main要素にbackgroundやらmarginやら設定していて、なぜかIEで表示されなかった。
なんでや！HTML5勧告やぞ！とパニクったので忘備録として残しておきます。
IEでmain要素が認識していなかったコード
確認環境：InternetExplorer11.0.43
index.html
<body>
<header>
ヘッダー要素
</header>
<main> <!-- メイン要素ここから -->
<section>コンテンツ</seciton>
<section>コンテンツ</seciton>
<section>コンテンツ</seciton>
</main> <!-- メイン要素ここまで -->
</body>
style.css
main {
background: url(img/bg.jpg);
width: 1024px;
height: 720px;
margin: auto;
}
IEで背景が表示されないのはwidthやheight指定がされていないのが原因～というのもありましたが、どうもそうでもない様子。
それどころかmargin:autoが利いていなかったので、そもそもCSSが問題ではないのでは？と辿り着く。
するとこんな記事を見つけました。
HTML5 から追加された要素 main ですが、レイアウトに導入するには注意が必要です。
IE9 ~ IE11(開発者ツール上は Edge 表記)では、main 要素の display プロパティの規定値は inline です。
したがって、ページ全体の構成を main 要素で指定する場合には、main 要素に display:block を指定する必要があります。
Chrome や FireFox などは、main 要素の display プロパティの規定値は block ですから、重複する指定になりますが、IE のために回避できません。
カラクリ.jp より引用
なぜIE以外はdisplay:blockなのに……しぶしぶdisplayを指定してやる。
解決したコード
index.html
<body>
<header>
ヘッダー要素
</header>
<main> <!-- メイン要素ここから -->
<section>コンテンツ</seciton>
<section>コンテンツ</seciton>
<section>コンテンツ</seciton>
</main> <!-- メイン要素ここまで -->
</body>
style.css
main {
background: url(img/bg.jpg);
width: 1024px;
height: 720px;
margin: auto;
display:block; /* IE対策に追加 */
}
これで問題なくbackgroundもmarginも利きました。やったぜ！
headerやfooterも利くのにmainだけ認識されていなかったため戸惑いましたが、これからは気を付けてあげよう……。