Help us understand the problem. What is going on with this article?

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

rukiadia
Front-end engineer in Tokyo
http://rukiadia.hatenablog.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした