我的网站在IE11中完全被破坏了.问题来自flex：1 1 0％;由于
autoprefixer和
postcss-flexbugs-fixes,我随处可见.
当我将它更改为flex时,该网站确实可以在IE上运行：1 1 auto;,但随后一些行为会发生变化(例如,一个FlexBox有两个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;
}
解决方法
说到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
