Question

我遇到IE11的问题，文本没有像其他浏览器那样包装。我已经为这个问题设置了一个codepen。

https://codepen.io/johnny_gruber/pen/QmBePd

HTML

<header>
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt="">
  </div>
  <div class="search">
      search
  </div>
  <div class="language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class="login">
    login v
  </div>
</header>

css

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  float: right;
}

li {
  padding: 25px 15px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

在chrome中，您可以看到预期的行为。如果可能，文本将换行。在IE11中它只停留在一行上。是否有机会在IE11上获得相同的行为？

谢谢！

Answer 1

IE 11要求将一个单位添加到第三个参数，即flex-basis属性

c / o CanIuse.com

从那里开始，只需将ul设置为display:flex，将li设置为：

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

＆＃13;

body {
  font-family: Arial;
  font-size: 16px;
}

header {
  display: flex;
  flex-direction: row wrap;
  max-width: 100%;
}

.logo {
  height: 72px;
}

.search,
.language,
.login {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid silver;
}

.logo,
.search,
.language,
.login {
  flex-shrink: 0; 
}

ul {
  display: flex;
  list-style:none;
}

li {
  padding: 25px 15px;
  flex: 1 1 50px;
}

nav {
  flex-grow: 1;
  flex-shrink: 1;
}

＆＃13;

<header>
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg" alt="">
  </div>
  <div class="search">
      search
  </div>
  <div class="language">
      DE v
  </div>
  <nav>
    <ul>
      <li>Home</li>
      <li>Product & Solutions</li>
      <li>Industries</li>
      <li>Facilities</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Group Website</li>
    </ul>
  </nav>
  <div class="login">
    login v
  </div>
</header>

＆＃13;

Codepen.io Demo

IE11 flexbox文本不包含在列表项中

1 个答案: