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

我有一个非常简单的布局，在 Firefox 和 Chrome 中都可以很好地呈现，但是 Internet Explorer(版本 11)似乎无法为 <main> 呈现任何类型的背景颜色。元素。

我有 <main>元素作为 <body> 的子元素元素而不是background或 background-color似乎有什么区别。 <main>将始终与 <body> 具有相同的背景.我还没有发现任何说明这是否是 IE 中的错误的信息。

查看 this jsfiddle使用 Internet Explorer 了解我的意思。

显然，我可以直接替换 <main>与 <div id="main">并更新我的 CSS 选择器，但我想了解为什么会这样。

最佳答案

IE11 不支持 <main>原生元素。您可以使用类似 Modernizr 的脚本来引入对它的支持。 , 或者一行无害的 JS:

document.createElement('main');

该元素不会被插入到 DOM 中，但它现在将被 IE 识别为正确的元素。在此之后，它仍然没有适当的样式。将以下内容添加到您的 CSS:

main {
    display:block;
}

一切都会好起来的。您目前认为它没有获得任何内容的原因是，如果没有这两个步骤，IE 不会将它添加到框模型中，因此它没有“布局”或“大小”。它只是看不见的，这就是你看到 body 的原因。它确实包含元素，这些元素根据 <main> 的左上角坐标正确呈现(有点)。元素。

关于CSS - Internet Explorer 和 <main> 标签背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26207016/