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上试用）。

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

}

Stack snippet

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

Answer 2

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

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

如何在IE11中进行基于flex的工作

2 个答案: