如何使 flex-basis 在 IE11 中工作答案

【问题标题】：How to make flex-basis work in IE11如何使 flex-basis 在 IE11 中工作
【发布时间】：2018-03-04 06:42:06
【问题描述】：

我的网站在 IE11 中完全崩溃。问题来自flex: 1 1 0%;，感谢autoprefixer 和postcss-flexbugs-fixes，我到处都在使用它。

当我将其更改为 flex: 1 1 auto; 时，该站点在 IE 上运行，但随后一些行为发生了变化（例如，一个带有两个 flex: 1 1 auto; 子代的弹性框不占用完全相同的空间）。因此，这个解决方案破坏了我在其他浏览器上的设计（同时在 IE11 上让它变得更好——没有被破坏）。

人们如何设法让他们使用 Flexbox 构建的网站在 IE11 上运行？

编辑：这是一支突出我面临的问题的笔：https://codepen.io/Zephir77167/pen/GMjBrd（在 Chrome 和 IE11 上试用）。

Edit2：这里是代码：

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;
}

【问题讨论】：

"IE 11 需要在第三个参数中添加一个单位，即 flex-basis 属性" - msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx
@Michael_B 因为我看不到只有一个解决方案，而是根据标记的外观进行反复试验，我认为答案/问题非常适合作为骗子
@LGSon，可能是。刚刚作为评论发布，以便 OP 可以查看。
我会同意，当然只要我们没有 OP 代码的演示来展示其他方式。最好作为一个可能有用的骗子来关闭，而不是因为缺少 MCVE 而关闭。
@Zephir77167 请在问题本身中包含您的代码，而不是链接到像 CodePen 这样的外部代码沙箱。如果/当 CodePen 出现故障时，它有助于防止链接失效，并且也是该站点对代码调试问题的要求。

标签： css internet-explorer flexbox internet-explorer-11

【解决方案1】：

我对此感到非常头疼，而不是做一个黑客，将你的 flex-basis 设置为 auto，然后如果你有一个容器大小，将 with 设置为相同的大小，即：

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

【讨论】：

【解决方案2】：

对于 IE11，您可以使用以下 CSS 规则明确定位它：

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

  /* IE11 specific properties */

}

堆栈sn-p

* {
  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>

这是我的一个回答的帖子，其中对此进行了更多讨论，并提供了一些可能有用的脚本解决方案

Instead of using prefixes I want to ask site visitors to upgrade their browser

【讨论】：