Flex-grow在IE 11上的表现不同

Question

我在IE上试验了flexbox，注意到我的导航栏在IE上的工作方式与所有其他浏览器不同。

如果右侧的按钮不能放在徽标旁边的空白处，导航栏就会出现在两行上。如果不合适，则使用flex- wrap : wrap将其推送到第二行。当它被推到第二行时，它会使所有按钮在整个屏幕宽度上居中。

我通过在徽标和导航栏之间的间隔物上使用高伸缩增长数解决了这个问题。这在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实现上的错误。从那以后它就一直是edge了，甚至edge也会停止更新。