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

Question

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

其中包括将max-width设置为100％，将父元素设置为display为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中不存在{ - 1}}，因此该元素采用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

Answer 2

嗨在这种情况下，我更喜欢在 .flexContainer

类中更改 flex-direction

.flexContainer {
   -webkit-flex-direction:column;
   -ms-flex-direction: column;
   flex-direction: column;
}

在这种情况下，添加到以下项目文件也可以帮助您

Normalize css

问候：）