我的网站在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;
}