BLOG

HTML5のmainタグ IEのバグ

PUBLISHED AT 02/16/2015 / IN CATEGORY web

html5_main_icatch

今更ながらhtml5に「main」というメインコンテンツを定義するタグがある事を知りました。

前からあったけ?

と思って調べたら、2013年4月くらいからあるみたいですね。知らなかった。

 

で、すげー分かりやすくて便利だなって思って新しい案件で使ってたら、なんか挙動がおかしい。

 

とりあえず、main要素でheight 100%がきかない。

むしろ最初はmain要素が原因だなんて分かりませんでした。

 

macの全ブラウザ問題なし。

windowsのchrome、firefox問題なし。

ie11だめ。

 

どういことだ?

古いIEがおかしいなら分かるが、なぜIE11でよくわからないバグが?

 

検証ツール使っても原因が分からず、とりあえずheightが切れる。

 

まったく分からなかったので、簡易レイアウトのhtmlファイル使って原始的検証。

 

するとやっぱりIE11がおかしい。多分それ以下のIEも。

 

もしや今回初めて使ったmainタグが原因では?

と思い、試しにdivに変えてみる。

 

ビンゴ!!

 

なんだかIEではmainタグが上手く認識されていないらしい。

なにそれ…

 

なのでmainタグにdisplay:block;を書けと

qiita」さんのブログに書いてありました。

 


main{
   display:block;
}