Internet Explorer 11 弹性盒子布局问题

Question

Internet Explorer 11 弹性盒子布局问题

6

我编写的代码在我测试过的所有浏览器中都能正常运行，除了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中测试，是否有帮助？

- jaypat32

请发布一个最小化的工作代码片段以重现问题，否则我们将无法提供帮助。 - Asons

@Michael_B 如果您发布相关的HTML并在标记我的时候，请放心，我会尽力帮助您解决问题。 - chris cozzens

1

flex 不需要使用浏览器前缀。 - junkfoodjunkie

3个回答

2

只需将宽度设置为100％即可解决我的问题。

- jaypat32

1

尝试使用display: run-in或display: inline-block代替display: -ms-flexbox；

- Aarzoo Trehan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chris cozzens · Accepted Answer

你只需要加上 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;
}