Edited at

IE11におけるmain要素の扱い

More than 3 years have passed since last update.

html5jのMLで「IE11でmain要素にwidth,heightが効かないです」という話題で盛り上がっていたので、纏めてみた。


IE11でmain要素を使うとどうなる?


まずはコードを書いて試してみましょう

サンプル

※IE11で開いてください


表示を確認してみましょう

IE11だと、Resultに何も表示されません。


どうして何も表示されないのか?

IE11がmain要素に対応していないから。

IE11でmain要素を含んだHTMLをレンダリングすると、main要素でマークアップされた部分はブロックレベル要素として扱われず、widthとheightの指定が無視される。


対応策は?

対応策としては以下の方法が考えられる。


  • main要素に「display: block」を付与する。

  • 外部ライブラリを使う。


1. display:blockを付与する

サンプル

上のサンプルコードにCSSを書き足してみましょう。

main {

width: 400px;
height: 400px;
background: red;
display: block; /* 追記 */
}

これでIE11でもmain要素がブロックレベル要素として扱われるようになり、width、height指定が有効になる。


2.外部ライブラリに頼る

html5.js 」とか「 html5shiv.js 」とか。その辺を使う。

ただそれだけ。

IE8のようなレガシーブラウザ対応をしている場合、既に読み込んでいる場合が多いと思います。

しかし、下記のようにIE8にだけ適用されるようにしている場合、IE11ではmain要素がブロックレベル要素として扱われずにハマるケースが稀にあるので注意してください(体験談)。

<!--[if lt IE 8]>

<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


余談 - floatの小噺

main要素にfloatをあてる

実用性はあまり無いかもしれませんが、この方法でもwidth, height指定が適用されます。


float は暗黙的にブロックレイアウトの使用を意味していて、display の計算値を変えるケースがあります


参考URL

floatをあてることで、mainのdisplayの値が再計算されてblockになり、width、heightの値が適用されるようになるという仕組みです。