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

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

IEでmain要素が認識していなかったコード

解決したコード