css - 如何使 flex-basis 在 IE11 中工作

Question

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

当我将其更改为 flex: 1 1 auto; 时，该站点在 IE 上确实可以运行，但随后某些行为发生了变化(例如，一个 flexbox 具有两个 flex: 1 1 auto; children 不占用完全相同的空间)。因此，此解决方案破坏了我在其他浏览器上的设计(同时使其在 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;
}

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>

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

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