IE11 / 10 HTML5主標記和溢出：隱藏的bug

Question

最基本的問題，但我花了幾個小時搜索，找不到答案。

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

此代碼按預期在Safari，Chrome和Firefox中返回空白。 但IE10 / 11顯示“不應顯示此內容”。

顯然溢出不起作用。

我已經嘗試將高度和寬度設置為main和section。 我試過位置：親戚（IE6 bug）。

這是一個非常基本的東西...我知道這是愚蠢的，可能回答10000次，但我的智慧結束了。 “duh”答案是......？

謝謝！

Answer 1

答案是因為IE10 / 11不支持<main> HTML5標記。

如果您將HTML更改為：

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

您不應再看到顯示的內容。

或者您可以將display: block添加到<main>標記。

見鏈接：

Answer 2

對於任意命名的元素，您需要使用display style屬性告訴Internet Explorer您希望元素的行為方式。

例如，如果您希望<main>元素的行為類似於<div> ，請為其指定一個樣式屬性display:block;

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