web-dev-qa-db-ja.com

<main>要素がInternetExplorer11で機能しない

CSSで<main>要素の幅を設定しようとしています。使用するだけ

main {
  width:200px;
}

internet Explorerを除くすべてのブラウザーで正常に動作します（Edgeは動作します）。

この例を見てください： JSfiddle

IE11での結果：

enter image description here

Chromeでの結果：

enter image description here

csshtmlinternet-explorerinternet-explorer-11
13
Jens Renders

HTML5 main要素はInternetExplorerではサポートされていません（ ブラウザのサポートデータを参照 ）。

mainを機能させるには、widthをブロックレベルの要素として定義する必要があります。

この調整を行います。

main {
  display: block;  /* new */
  width: 200px;
}

main要素はInternetExplorerによって認識されないため（つまり、IEのデフォルトのスタイルシートで定義されていないため）、CSSの初期値を使用します（ 仕様による ）。

display プロパティの初期値はinlineです。

widthプロパティは、インライン要素によって無視されます。仕様から：

10.3.1インラインの置換されていない要素

widthプロパティは適用されません。

main要素を作成者スタイルのブロックレベル要素として定義することにより、widthプロパティが機能します。

詳細：

33
Michael_B