我有一个非常简单的布局，在 Firefox 和 Chrome 中都能很好地呈现，但 Internet Explorer（版本 11）似乎无法为 <main> 元素呈现任何类型的背景颜色。
我将<main> 元素作为<body> 元素的子元素，而background 或background-color 似乎都没有任何区别。 <main> 将始终具有与 <body> 相同的背景。我还没有找到任何说明这是否是 IE 中的错误。
使用 Internet Explorer 查看this jsfiddle，了解我的意思。
显然，我可以将 <main> 替换为 <div id="main"> 并更新我的 CSS 选择器，但我想了解为什么会这样。
【问题讨论】：
标签： css html internet-explorer
简单：IE11 不支持<main> 标签。
【讨论】：
IE11 本身不支持<main> 元素。您可以使用 Modernizr 之类的脚本或单行无害的 JS 来引入对它的支持：
document.createElement('main');
该元素不会被插入到 DOM 中，但它现在会被 IE 识别为正确的元素。在此之后，它仍然没有适当的样式。将以下内容添加到您的 CSS：
main {
display:block;
}
一切都会好起来的。您目前看到它没有获得任何内容的原因是 IE 没有这两个步骤就不会将它添加到盒子模型中，因此它没有“布局”或“大小”。它只是看不见的，这就是你看到身体的原因。它确实包含元素，这些元素会根据<main> 元素的左上角坐标正确呈现（某种程度）。
【讨论】：
<main>。现在我知道了，我找到了this question。添加display: block; 似乎效果很好。
<main> 元素中，但看起来它默认将其呈现为内联元素，可能是因为 IE 无法识别它。似乎这一切都只是 IE 相对较长的更新周期的副作用。离开 <main> 并在 CSS 中添加 display: block; 给了我两全其美：HTML5 元素的使用和与旧浏览器的兼容性。