IEで表示が崩れるHTML5のmainタグのバグ対策

マークアップをするとき、タグに意味を持っているHTML5の方がSEOに強い気がする。現時点ではSEOに本当に効果があるのかは、はっきりと分からないが使っておいて損はないだろう。

IEでの表示が崩れるおそれのあったmainタグを敬遠していたけど、簡単にコード追加するだけでIEのバグ対策ができるということなので、今度から使っていこうと思う。

HTML5のmainタグが効かない？mainタグの使い方

IEではHTML5のバグがあります。特に古いバージョンでは一切HTML5をサポートしていませんので、クロスブラウザをある程度完璧にさせるためにはhtml5shiv.jsが必要になります。

旧バージョンのIE対策のために条件分岐のコメントタグが使われていましたが、
Internet Explorer 10 の標準モードと Quirks モードでは、条件付きコメントのサポートが削除されました。

こうなってしまったら、html5shiv.jsために条件分岐のコメントタグをいちいち書く必要もないんじゃないですかね。

html5shiv.jsが非同期になっているのかわからないので、‹/body›の直前に入れておけばいいんじゃないでしょうか。

html5shiv.js使ってるし、HTML5対応しているはずのIE11で表示がガッツリ崩れた。

原因はmainタグ……。

解決方法h至って簡単display:block;を入れるだけ。


main { display: block; }

IEは最新バージョンにしてもバグが隠されてるから気をつけないとね。

div id=”main” の代わりに使うのがmainタグなので、もちろん1ページで使っていい回数は一回だけ。まさか何回も使う人はいないと思うけどね。