HTML5のmainタグをIEで利用する

コーディングしてるときにつまずいたのでメモとして残しておく。

とりあえずIE8以下(IE9未満)に対応させる

GitHubにある「html5shiv」をHTMLファイル内に記述する。
URL：https://github.com/aFarkas/html5shiv

<!--[if lt IE 9]> 
<script src="js/html5shiv.js"></script>
<script type="text/javascript">
    document.createElement('main');
</script>
<![endif]-->

IE8あたりでだいたいのHTML5を使うならこのくらいで充分だったんですが…。
どうもdocument.createElement('main');入れてあげないとmainタグが上手く認識されず。

mainタグのCSSを設定する

IE11でみてるとmainタグの部分がレイアウトが崩れていた。
Firefox、Chromeで見ると問題なかったのでIE固有の問題だろう。
解決策としてCSSでブロック要素にしてしまう。

main {
    display: block;
}

Edgeの対応とWindows10に搭載のIE11について(2016/03/04追記)

Windows10が手に入ったのでEdgeとIE11まるごと検証しました。
Edgeはmainタグにバッチリ対応してます！
ただし、IE11は対応してません。
ということでmainタグを使う際はやはり、Windows10のIEユーザーもいることに注意する必要がありそうです。