Question

有文字＆amp;使用IE11的flex-layouts中的高度问题。

这是一个想法：

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

Chrome - 滚动栏

但是，不使用IE11和Safari，看起来像这样：

IE - 文本转义

以下是代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

那里有什么问题？

Answer 1

就Safari而言......

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

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

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

Answer 2

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

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

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

谢谢Michael_B！

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

2 个答案: