コーディングしてるときにつまずいたのでメモとして残しておく。
とりあえず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ユーザーもいることに注意する必要がありそうです。