HTML
CSS
HTML5
IE11

IEでmain要素が認識されないことがある

More than 1 year has passed since last update.

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.png

なぜ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だけ認識されていなかったため戸惑いましたが、これからは気を付けてあげよう……。