我有一个非常简单的布局,在Firefox和Chrome中都可以很好的使用,但Internet Explorer(版本11)似乎无法渲染< main>元件.
我有< main>元素作为< body>的子代元素,背景或背景颜色都没有任何区别. <主>将始终具有与< 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没有添加到框模型没有这两个步骤,因此它没有得到“布局”或“大小”.这只是看不见的,这就是为什么你看到身体.它包含元素,它们根据< main>的左上角坐标正确地渲染(排序).元件.
