Flex-grow 在 IE 11 上表现不同

Question

我在 IE 上试用 flexbox，发现我的导航栏在 IE 上的工作方式与所有其他浏览器不同。

只要右侧的按钮不适合徽标旁边的 space，导航栏就会出现在两行中。如果它不适合，它被推到第二行 flex-wrap: wrap 。当它被推到第二行时，它会将所有按钮居中放置在整个屏幕宽度上。

我通过在徽标和导航栏之间的 spacer 上使用高 flex-grow 数字来解决此问题。这适用于 chrome、edge 等，但不适用于 Internet Explorer 11。

我用来测试这个的演示： https://jsfiddle.net/td2rq4h1/

*{
  box-sizing: border-box;
}

body{
  background: red;
}

.logo{
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}
#headermenu{
  background-color: gray;
  
  .telephone {
    border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
  }
}

#menu{
  background-color: blue;
}

.spacer {
  flex-grow: 1000;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.inner-spacer {
  flex-grow: 1;
  flex-basis: 100%;
}

.link {
  flex-grow: 0;
}

nav{
  border: 5px solid black;
  flex: 1 1;
  display: flex;
  justify-content: center;
  
  
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  li{
      border: 2px solid purple;
      background-color: white;
      padding: 1em;
      white-space: pre;
      margin: 0;
      display: inline-block;
    }

<div id="menu" class="d-flex flex-wrap">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <nav>
    <ul class="d-flex flex-row">
      <li>Home</li>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

任何人都可以向我解释为什么会发生这种情况以及我该如何解决这个问题？谢谢

Answer 1

您可以减少对 flex: x 属性的使用，而使用 margin 来代替……拥抱 flex 价值..

从损坏的 jsfiddle 派生的示例：

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

body {
  background: red;
}

.logo {
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}

#headermenu {
  background-color: gray;
}

#headermenu .telephone {
  border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
}

#menu {
  background-color: blue;
}

.spacer {
  flex-grow: 1;
  background-color: green;
  display: flex;
}

nav {
  border: 5px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

nav ul li {
  border: 2px solid purple;
  background-color: white;
  padding: 1em;
  white-space: pre;
  margin: 0;
  display: inline-block;
}

<div id="menu" class="d-flex flex-wrap">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <nav>
    <ul class="d-flex flex-row">
      <li>Home</li>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

解释：IE11 即将推出十年，此后未更新其 flex 实现上的错误。从那以后一直是边缘，甚至边缘将停止更新。

Flex-grow 在 IE 11 上表现不同

Flex-grow behaving differently on IE 11

html

css

flexbox

internet-explorer-11