IE11和Safari上的文本在Flexbox布局中重叠 [英] Text overlapping in flexbox layout on IE11 and Safari

问题描述

有文字&在IE11中弹性布局的高度问题。

这里有个想法：

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

Chrome - 滚动条

但是，IE11和Safari不兼容，看起来像这样：

IE浏览器文本转义
$ b 。

对于flexbox浏览器的支持细节请看这里： http://caniuse.com/#search=flexbox

Have text & height problem in flex-layouts with IE11.

Here is the idea:

I have 3 rows of content. If I have large content I have a scroll bar which looks like this:

Chrome - scroll bar

BUT, not working with IE11 and Safari, looks like this:

IE - text escapes

Here is the code:

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

What's wrong there?

解决方案

In terms of Safari...

Although Safari 9 supports all standard flex properties, Safari 8 and older require vendor prefixes.

For a quick way to add all the prefixes you need use Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox

这篇关于IE11和Safari上的文本在Flexbox布局中重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！