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

Question

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

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

我通过在 Logo 和导航栏之间的间隔上使用高 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 实现上的错误。从那以后就一直是edge，甚至edge也会停止更新。