IE11 和 Safari 上 flexbox 布局中的文本重叠

Question

在 IE11 的弹性布局中存在文本和高度问题。

想法是这样的：

我有 3 行内容。如果我有大量内容，我会有一个滚动条，如下所示：

Chrome - 滚动条

但是，不支持 IE11 和 Safari，看起来像这样：

IE - 文本转义

代码如下：

.header-container {
  min-height: 100%;
}
.header-container .wrapper {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
}
.header-container .wrapper nav {
  height: 100%;
  width: 100%;
}
.header-container .wrapper nav ul {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.header-container .wrapper nav ul li {
  border-top: 1px solid #ccc;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.header-container .wrapper nav ul li p {
  margin: 0;
  padding: 10px 40px;
  text-align: center;
}

<div class="header-container">
  <header class="wrapper clearfix">
    <h1 class="title" style="display: none">h1.title</h1>
    <nav>
      <ul>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          </p>
        </li>
      </ul>

怎么了？

Answer 1

在 Safari 方面...

尽管 Safari 9 支持所有标准 flex 属性，但 Safari 8 及更早版本需要供应商前缀。

要快速添加您需要的所有前缀，请使用 Autoprefixer。

有关 flexbox 浏览器支持的详细信息，请参见此处：http://caniuse.com/#search=flexbox

Answer 2

我认为解决这个问题的方法是使用跨浏览器前缀和类似的东西..

有帮助link： http://ptb2.me/flexbox/ - 在这里我发现 Flexbox / Layout CSS 支持必须流行的浏览器。

通过使用 autoprefixer 我找到了解决方案。

谢谢Michael_B！

IE11 和 Safari 上 flexbox 布局中的文本重叠

Text overlapping in flexbox layout on IE11 and Safari

css

safari

flexbox

internet-explorer-11