IEの<main>タグがブロック要素じゃない

先日、『サイトの背景にYoutubeの動画を敷きたい』という要望をいただきまして対応したのですがそこでデザインの崩れに手を焼いたので投稿します。

プラグインはJQueryの「jquery.mb.YTPlayer」を使ったのですが、これはiframeで読み込んだYoutube動画をスタイルシートのposition属性のabsoluteを使って位置調整するというものです。

どうにもこれがインターネットエクスプローラーだけ崩れる。

スタイルを追加

なぜだろうと思って調べてみると。

<main>タグがデフォルトでinlineになってるらしい。IEだけ。
インターネットエクスプローラーだけ！！
そんなわけでreset.cssに以下を追加。

main{
display: block;
}

一件落着。

ブラウザの仕様

こんな感じでブラウザ毎の仕様の差異にいつも手を焼いています。
そろそろ『インターネットエクスプローラー引退』なんて話もありますが、もうしばらくは我慢しなければならないのかもしれません。

「jquery.mb.YTPlayer」

Jqueryプラグイン「jquery.mb.YTPlayer」
GitHubからダウンロードできます
→ https://github.com/pupunzi/jquery.mb.YTPlayer