CSS - Internet Explorer和标签背景

I have a pretty simple layout which renders fine in both Firefox and Chrome, but Internet Explorer (version 11) seems to be unable to render any kind of background color for the <main> element.

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

I have the <main> element as a child of the <body> element and neither background or background-color seem to make any difference. <main> will always have the same background as <body>. I haven't found anything that says whether or not this is a bug in IE.

我将

元素作为元素的子元素，背景或背景颜色似乎没有任何区别。

将始终与具有相同的背景。我还没有找到任何说明这是否是IE中的错误。

Check out this jsfiddle using Internet Explorer to see what I mean.

使用Internet Explorer查看这个jsfiddle，看看我的意思。

Obviously, I could just replace <main> with <div id="main"> and update my CSS selectors but I want to understand why this is happening.

显然，我可以用

替换

并更新我的CSS选择器，但我想了解为什么会发生这种情况。

2 个解决方案

#1

IE11 does not support the <main> element natively. You can introduce support for it by either using a script like Modernizr, or a single harmless line of JS:

IE11本身不支持

元素。你可以使用像Modernizr这样的脚本或者一个无害的JS系列来引入对它的支持：

document.createElement('main');

The element will not be inserted in the DOM, but it will now be recognized as a proper element by IE. After this, it still does not have proper styling. Add the following to your CSS:

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

main {
    display:block;
}

And all will be fine. The reason you currently see it as not getting any content because IE does not add it to the box model without these 2 steps, and as such it gets no 'layout' or 'size'. It's just invisible, that's why you see the body. It does contain elements, which get rendered (sort of) correctly based on the top left coordinate of the <main> element.

一切都会好起来的。您之前看到它没有获得任何内容的原因是因为IE没有这两个步骤就不会将它添加到盒子模型中，因此它没有“布局”或“大小”。它只是看不见，这就是你看到身体的原因。它确实包含元素，这些元素根据

元素的左上角坐标正确呈现（排序）。

#2

Simple: The <main> tag is not supported in IE11.

简单：IE11不支持

标记。

#1