<main>要素がInternet Explorer 11で動作しない

<main>要素の幅をCSSで設定しようとしています。ちょうど<main>要素がInternet Explorer 11で動作しない

main { 
    width:200px; 
}

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

この例を見てみましょう：IE11でJSfiddle

結果：

結果をChromeで：

出典

2016-03-05 Jens Renders

HTML5 main要素ではありませんInternet Explorerでサポートされています（see browser support data）。

widthのブロックレベルの要素として、mainを定義する必要があります。 main要素がInternet Explorerの–によって認識されないので、それはIEのデフォルトのスタイルシート、それはCSSの初期値を使用しています–（per the spec）で定義されていないという意味

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

：

は、この調整を行います。

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

widthプロパティは、インライン要素では無視されます。スペックから：

10.3.1 Inline, non-replaced elements

widthプロパティは適用されません。著者スタイルでブロックレベル要素、widthプロパティが動作するようにmain要素を定義することによって

。

詳細：

出典

2016-03-05 21:59:30

おかげで、これは動作します！ IE11はこの単純なHTML5タグをサポートしていません。 –

upvoted、良い答えがうまく説明されています。 – Billy

@JensRenders他のすべてのブラウザでサポートされている新しい要素、CSSプロパティ、APIをサポートするにはIE年を要しますが、これは驚くことではなく、Edgeではあまり変わりません。 – Rob

<main>要素がInternet Explorer 11で動作しない

答えて

関連する問題