本文介绍了CSS - Internet Explorer和< main>标记背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个非常简单的布局,它在Firefox和Chrome浏览器都很好,但Internet Explorer(版本11)似乎无法呈现任何种类的背景颜色为< main> 元素。

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.

我有< main> 元素作为< body> 元素和 background background-color 做出任何区别。 < main> 将始终具有与< body> 相同的背景。我没有找到任何说明这是否是IE中的错误。

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.

查看使用Internet Explorer查看我的意思。

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

显然,我可以替换< main& < div id =main> 并更新我的CSS选择器,但我想知道为什么会发生这种情况。

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

推荐答案

IE11本身不支持< main> 元素。您可以使用像这样的脚本或一个无害的JS脚本来引入支持:

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:

document.createElement('main');

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

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:

main {
    display:block;
}

你目前看到它没有得到任何内容的原因,因为IE不添加到框模型没有这两个步骤,因此它没有'layout'或'size'。它只是看不见,这就是为什么你看到的身体。 包含根据< main> 元素的左上角坐标正确渲染(排序)的元素。

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.

这篇关于CSS - Internet Explorer和&lt; main&gt;标记背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 09:07
查看更多