html - Internet Explorer 11 flex 盒问题

标签 html css flexbox internet-explorer-11

我编写的代码在我测试过的所有浏览器中都有效,但 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 中测试会有帮助吗?

最佳答案

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

关于html - Internet Explorer 11 flex 盒问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42966352/

相关文章:

html - 如何在这个 super 简单的示例中模糊黑框/边框?

javascript - 当鼠标悬停在图像上时 onmouseover 失败

css - 将鼠标悬停在一个 div 上,更改另一个的颜色,但淡出所有未悬停的 div

html - Bootstrap 4 中的 Flex 布局(排序?)

javascript - 在 JQuery 中包含基于 li 标签 id 的 html

python - 以编程方式将网页保存到静态 HTML 文件的最佳方法

javascript - 停止下拉宽度扩大

css - CSS "Quote in a Quote"问题

html - CSS3 : Nested flexbox form messes up spacing

html - 如何在不使用 flexbox 的情况下使 css 三 Angular 形居中?