Internet Explorer 11 弹性盒问题

Question

我编写的代码在我测试过的所有浏览器中都有效，除了 IE 11。问题似乎出在这里：

#wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: relative;
    top: 1em;
}

如果我删除 flex，它会变得更易于管理，但有了它们，它会将所有内容缩小到这个又长又窄的 div 中，永远持续下去。

如果我在 IE 10 中测试会有帮助吗？

Answer 1

你只需要flex:1；它将解决 IE11

的问题

#wrapper {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
height: 100%;
position: relative;
top: 1em;
flex:1;
}

Answer 2

只需将正文的宽度增加 100% 即可解决我的问题。

Answer 3

尝试 display: run-in 或 display: inline-block 而不是 display: -ms-flexbox；

Internet Explorer 11 弹性盒问题

Internet Explorer 11 flexbox issues

html

css

flexbox

internet-explorer-11