如何使flex-basis在IE11中生效

Question

我的网站在IE11中完全崩溃了。这个问题来自于flex: 1 1 0%;，我在所有地方都使用它，感谢autoprefixer和postcss-flexbugs-fixes。

当我将其更改为flex: 1 1 auto;时，该网站在IE上可以正常工作，但是某些行为会发生变化（例如，一个具有两个flex: 1 1 auto;子元素的flexbox不会占据完全相同的空间）。因此，这个解决方案破坏了我在其他浏览器上的设计（尽管在IE11上看起来好多了）。

人们如何设法使他们使用Flexbox构建的网站在IE11上工作呢？

编辑：这里有一个示例，突出显示了我面临的问题：https://codepen.io/Zephir77167/pen/GMjBrd （请在Chrome和IE11上尝试）。

编辑2：这是代码：

HTML：

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

.item.flex-1-variation {
  flex: 1 1 auto;
}

- adrienharnay

---

IE 11要求在第三个参数中添加一个单位到flex-basis属性中。- https://msdn.microsoft.com/zh-cn/library/dn254946(v=vs.85).aspx - Paulie_D

@Michael_B 由于我看不到“唯一的解决方案”，而是基于标记的外观进行试错，所以我认为那个答案/问题非常适合作为重复。 - Asons

@LGSon，可能是这样。只是发布为评论，以便原帖作者可以查看。 - Michael Benjamin

我同意，只要我们没有OP的代码演示来证明相反。最好将其关闭为可能有帮助的重复问题，而不是关闭为缺少MCVE。 - TylerH

请参考@LGSon的答案，它提供了更清晰的方法来提供IE特定规则。 - Gabriele Petrioli

Answer 1

在涉及到IE11时，您可以使用以下CSS规则来明确地进行定位：

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}

代码段

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}

<div id="a" class="flex">
  <div id="b" class="item flex-1 IE-FlexAuto">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1 IE-FlexAuto">
    Heyheyheyheyho
  </div>
</div>

这里有一篇我的回答，进一步阐述了这个问题，并提供了一些脚本解决方案，可能会有帮助。

• 不想使用前缀，而是要求网站访问者升级他们的浏览器

- Asons

Answer 2

我因此头痛不已，而非采用hack方法，应将flex-basis设置为自动，然后如果你有一个容器大小，请将宽度设置为同样的大小，例如：

@include breakpoint(m){
  flex: 0 48%;
  flex-basis: auto;
  width: 48%;
}

- Who Me Dunno Mate