IE11/10 HTML5 main tag and overflow:hidden bug

Most basic of problems, but I've spent hours searching and can't find the answer.

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

This code returns blank in Safari, Chrome, and Firefox as expected. But IE10/11 shows "This should not be displayed."

Obviously the overflow is not working.

I've tried setting height and width to both main and section. I've tried position:relative (IE6 bug).

It's something so basic... I know this is stupid and probably answered 10000 times, but I'm at my wits end. The "duh" answer is...?

Thanks!

Solution

The answer is because the <main> HTML5 tag is not supported in IE10/11.

If you change your HTML to :

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

You should no longer see the content displayed.

Or you could add display: block to your <main> tag.

See link :