CSS - Internet Explorer和<main>标签背景

Question

16

我有一个相当简单的布局，Firefox和Chrome都可以正常呈现，但Internet Explorer（版本11）似乎无法为<main>元素渲染任何背景颜色。

<main>元素是<body>元素的子元素，无论使用background还是background-color都没有任何区别。<main>始终具有与<body>相同的背景。我没有找到任何说明这是否是IE中的错误的内容。

请使用Internet Explorer查看此jsfiddle以了解我的意思。

显然，我可以将<main>替换为<div id="main">并更新CSS选择器，但我想了解为什么会发生这种情况。

- hololeap

实际上很容易找到这种情况发生的原因。 - Niels Keurentjes

2个回答

3

简单来说，IE11不支持<main>标签。

- fzzle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niels Keurentjes · Accepted Answer

IE11 不支持 <main> 元素的原生使用。您可以通过使用像 Modernizr 这样的脚本，或者一行无害的 JS 代码来引入其支持：

document.createElement('main');

该元素不会被插入DOM中，但它现在将被IE视为一个真正的元素。之后，它仍然没有适当的样式。请在您的CSS中添加以下内容：

main {
    display:block;
}

一切都会好的。你现在看不到内容的原因是因为IE没有将它添加到盒子模型中，没有进行这2个步骤，因此它没有'布局'或'大小'。它只是看不见的，这就是为什么你看到body。它包含元素，这些元素基于<main>元素的左上角坐标被（有点）正确地呈现。