html - 使用 flexbox 时，文本不会在 IE 10 中换行

Question

我已经尝试了几乎所有我可以通过谷歌搜索找到的解决方案。

包括将 max-width 设置为 100%，将父元素设置为 display as block 或 flex ，将 white-space 设置为 normal，并尝试使用 overflow 但在我的情况下似乎没有任何效果。

无论如何，它应该是这样的(在 IE 11、Firefox 和 Chrome 中实际上是这样):

在 IE 10 上看起来像这样:

.

body {
  padding: 0;
  margin: 0;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
.flexContainer {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: normal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -mox-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flexContainer * {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 1;
  -moz-flex-shrink: 1;
  -ms-flex: 1;
  flex-shrink: 1;
  -webkit-flex-basis: auto;
  flex-basis: auto;
  width: auto;
  background-color: rgba(255, 0, 0, 0.1);
}

<div id="wrapper">
    <div class="flexContainer">
      <header>
        <img id="header-logo" src="images/black.svg" />
        <div id="hamburger-menu">
          <a href="#">&#9776;</a>
        </div>
      </header>
      <main>
        <section>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h2>Quisque purus lectus, posuere eget imperdiet nec sodales id arcu</h2></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
            <a href="#">
              <img src="http://placehold.it/320x150" alt="Placeholder image">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
            </a>
          </article>
        </section>
        <section>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <div class="flex-fix">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
              </div>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
          <article>
            <a href="#"><h1>Lorem ipsum dolor sit amet</h1></a>
            <a href="#">
              <img src="http://placehold.it/258x159" alt="">
            </a>
            <a href="#">
              <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet, lorem velit accumsan velit vel mattis libero nisl et sem. Proin interdum maecenas massa turpis sagittis in, interdum non lobortis vitae massa.</figcaption>
            </a>
          </article>
        </section>
      </main>
      <aside id="right" class="aside">
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
        <section>
          <a href="#"><h2>Section heading</h2></a>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Mauris sed libero. Suspendisse facilisis nulla in lacinia laoreet.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Nam molestie nec tortor.</figcaption>
              </a>
            </div>
          </article>
          <article>
            <a href="#">
              <img src="https://placehold.it/150x92" alt="The Main News" width="150" height="92">
            </a>
            <div>
              <a href="#"><h3>Article title</h3></a>
              <a href="#">
                <figcaption>Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi.</figcaption>
              </a>
            </div>
          </article>
        </section>
      </aside>
      <footer "><p>footer</p></footer>
        </div>
    </div>

Answer 1

问题的根源在于 HTML 中的 main 元素。

此元素是在 HTML5 中引入的，IE10 无法识别。

由于 IE10 不支持 main——这意味着它在 the browser's default style sheet 中不存在——该元素假定为 initial properties as defined in the spec。

因此，布局中的 main 是 display: inline。 (检查开发工具，你会发现它没有宽度，也没有包裹任何东西。这只是一个小规范。)

通过以下调整，main 应该可以在 IE10 中工作，使文本能够换行:

main {
   display: block;
}

请注意，main 元素是唯一的，因为其他 HTML5 元素，例如 article、section、header 和 figcaption (也在您的代码中)在 IE10(甚至 IE9)中工作正常。无论出于何种原因，IE 都冷落了 main。有关详细信息，请参阅下面的 caniuse 链接。

更多信息:

• Default settings of unrecognized HTML elements
• <main> element not working in Internet Explorer 11
• 9.2.4 The display property
• main element browser support at caniuse.com