Question

这是我在我的网站上遇到的一个问题，我已经在js小提琴上重新创建了问题，我正在尝试使用具有偶数宽度的节标记创建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

IE不支持

<main>标记。它仅受Firefox + Chrome + Edge支持：

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>

IE11上忽略了css列数

2 个答案: