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 の計算値を変えるケースがあります
floatをあてることで、mainのdisplayの値が再計算されてblockになり、width、heightの値が適用されるようになるという仕組みです。