1

これは私が自分のサイトで抱えている問題です。js フィドルで問題を再現しました。列数を使用して幅が均一なセクション タグを使用して 5 つの列を作成しようとしています。これは chrome/firefox/edge では正常に動作しますが、インターネットでは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;
}
4

2 に答える 2

1

<main>タグは IE ではサポートされていません。Firefox + Chrome + Edge でのみサポートされています。

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

これが、列で機能しない理由です。

于 2016-07-29T11:28:50.067 に答える
0

メイン タグを 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>
于 2016-07-29T11:25:10.310 に答える