css - <main> 元素在 Opera、Safari、IE 中不显示填充

Question

我的元素中有 html5 元素并给它一个填充。 Firefox 和 Chrome 可以正确显示填充，但不幸的是 Opera、Safari 和 IE 不能。

您有遇到过这个问题并且知道如何解决吗？

由于我的 reset.css，它没有发生，我能够在一个简单的 fiddle 中重现错误。只需在指定的浏览器中检查它以查看差异。

FIDDLE

这是示例代码。

HTML:

<section class="wrapper">gets padding everywhere</section>
<main class="wrapper">gets no padding in the mentioned Browsers</main>
<section class="wrapper">gets padding everywhere</section>

CSS:

.wrapper {
    padding: 8em 0;
}

谢谢!

Answer 1

看起来 IE、Opera 等不处理 <main>标记为显示 block 。我添加了 css 来强制它并且它在你谈到的所有浏览器中都有效 here

main.wrapper{
    display: block;
}