IE11でCSSの列数が無視される

Question

これは私のサイトで問題が発生しています。私はjs fiddleで問題を再現しました。列数を使用して偶数幅のセクションタグを使用して5列を作成しようとしています。 chrome/firefox/edgeが表示されますが、Internet Explorer 11では無視され、セクションがブロックとして表示されます。

私は、IEでサポートされるべきカラム数を読んでいますので、無視されている理由、これはバグですか、何か間違っているのですか？ 私のバイオリンは

https://jsfiddle.net/gqdL46j4/

HTML

<main> 
    <section> 
    <h1>Test1</h1> 
    </section> 
    <section> 
    <h1>Test2</h1> 
    </section> 
    <section> 
    <h1>Test3</h1> 
    </section> 
    <section> 
    <h1>Test4</h1> 
    </section> 
    <section> 
    <h1>Test5</h1> 
    </section> 
</main> 

CSS

main { 
    -webkit-column-count: 5; 
    -moz-column-count: 5; 
    column-count: 5; 
} 

section { 
    width: 100%; 
    display:inline-block; 
} 

Answer 1

<main>タグはIEでサポートされていません。これは、唯一のFirefox +クロム+エッジによってサポートされています：

それが列を操作しない理由だ

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

。

Answer 2

を下回っている私はdiv要素でメインタグを交換しようと、それが機能するようになりました、理由がありますメインタグではうまくいかないでしょうか？

https://jsfiddle.net/gqdL46j4/3/

<div> 
    <section> 
    <h1>Test1</h1> 
    </section> 
    <section> 
    <h1>Test2</h1> 
    </section> 
    <section> 
    <h1>Test3</h1> 
    </section> 
    <section> 
    <h1>Test4</h1> 
    </section> 
    <section> 
    <h1>Test5</h1> 
    </section> 
</div>