IE11におけるmain要素の扱い

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の値が適用されるようになるという仕組みです。