IE11/10 HTML5 主标签和 overflow:hidden 错误

Question

最基本的问题，但我花了几个小时搜索但找不到答案。

<main style="height:0px;overflow:hidden;">
    <section>
       This should not be displayed
    </section>
</main>

此代码 returns 在 Safari、Chrome 和 Firefox 中如预期的那样为空白。但是 IE10/11 显示 "This should not be displayed."

显然溢出不起作用。

我试过为主要部分和部分设置高度和宽度。我试过 position:relative（IE6 错误）。

这是非常基础的东西...我知道这很愚蠢并且可能回答了 10000 次，但我已经束手无策了。 "duh" 答案是...?

谢谢！

Answer 1

对于任意命名的元素，您需要使用 display 样式属性来告诉 Internet Explorer 您希望该元素的行为方式。

例如，如果您希望 <main> 元素表现得像 <div>，请为其指定样式属性 display:block;

<main style="height:0px;overflow:hidden;display:block;">
    <section>
       This should not be displayed
    </section>
</main>

Answer 2

答案是因为 <main> HTML5 标签不支持 IE10/11.

如果您将 HTML 更改为：

<div style="height:0px;overflow:hidden;">
    <div>
       This should not be displayed
    </div>
</div>

您应该不会再看到显示的内容。

或者您可以将 display: block 添加到您的 <main> 标签。

参见link：

IE11/10 HTML5 main tag and overflow:hidden bug