css 在 IE11 上忽略的列数

Question

这是我网站上的一个问题，我在 js 上重现了这个问题 fiddle，我正在尝试使用部分标签创建 5 列，宽度使用列数，这在chrome/firefox/edge，但在 Internet Explorer 11 上，它会被忽略并将部分显示为块。

我读到 IE 应该支持列数，所以我很困惑为什么它被忽略了，这是一个错误还是我做错了什么？我的 fiddle 低于

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

我刚刚尝试用 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>

Answer 2

IE 不支持

<main> 标签。只有 Firefox + Chrome + Edge:

支持

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

这就是它不适用于列的原因。

css 在 IE11 上忽略的列数

css column count ignored on IE11

html

css

column-count