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

Question

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

这些包括设置max-width为100%,将父元素设置为displayas 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

问题的根源是mainHTML中的元素.

此元素是在HTML5中引入的,IE10无法识别.

由于main不支持IE10 -这意味着它不存在于浏览器的默认样式表 -元素呈现在规范定义的初始属性.

结果,main在你的布局中display: inline.(检查开发工具,你会发现它没有宽度,也没有包装任何东西.这只是一个小规格.)

通过以下调整,main应该在IE10中工作,启用文本换行:

main {
   display: block;
}

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

更多信息:

• 无法识别的HTML元素的默认设置
• <main>元素在Internet Explorer 11中不起作用
• 9.2.4 display财产
• main caniuse.com上的元素浏览器支持