显示:flex 不适用于 Internet Explorer [英] display: flex not working on Internet Explorer

问题描述

我的弹性容器:

.back_pattern {显示:弹性；显示:-ms-flexbox；-ms-flex-pack:居中；弹性方向:列；对齐内容:居中；对齐内容:居中；最小高度:100vh；宽度:100%；}

在其他浏览器上一切正常.
ie11 : _{截取自 caniuse.com}

的屏幕截图和信息

注意事项

Internet Explorer 10 之前不支持 Flexbox，而 IE 11 只支持 2012 语法.

已知问题

• IE 11 要求将一个单位添加到第三个参数中，flex-basis 属性请参阅 MSFT 文档.
• 在 IE10 和 IE11 中，如果容器具有 min，带有 display: flex 和 flex-direction: column 的容器将无法正确计算其伸缩子项的大小-height 但没有明确的 height 属性.查看错误.
• 在 IE10 中，flex 的默认值是 0 0 auto 而不是最新规范中定义的 0 1 auto.
• 使用 min-height 时，IE 11 无法正确垂直对齐项目.查看错误.

解决方法

Flexbugs 是社区策划的 Flexbox 问题列表以及针对这些问题的跨浏览器解决方法.以下是所有错误的列表，其中包含可用的解决方法以及影响的浏览器.

1. 不遵守弹性项目的最小内容大小
2. 设置为 align-items: center 的列弹性项目会溢出它们的容器
弹性容器上的
3. min-height 不适用于它的弹性项目
4. flex 带有无单位 flex-basis 的简写声明代码>值被忽略
5. 列flex 项并不总是保持固有的纵横比
6. 默认 flex 值已更改
7. flex-basis 不考虑 box-尺寸:边框框
8. flex-basis 不支持 calc()
9. 某些 HTML 元素不能是 flex 容器
10. align-items: baseline 不适用于嵌套的 flex 容器
11. 包装弹性项目时忽略最小和最大尺寸声明
12. 内联元素不被视为弹性项目
13. 在使用 flex 速记时忽略 flex-basis 的重要性
14. 使用 flex-flow: column wrap 收缩以适应容器不包含他们的项目
15. 列弹性项目忽略横轴上的margin: auto一个>
16. flex-basis 不能动画
17. 使用 max-width 时，Flex 项目没有正确对齐

My flex container:

.back_pattern {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

On other browsers everything works.
ie11 : http://take.ms/68dHo ;
chrome : http://take.ms/JhcEH
What's problem?

解决方案

Internet Explorer doesn't fully support Flexbox due to:

Partial support is due to large amount of bugs present (see known issues).

_{Screenshot and infos taken from caniuse.com}

Notes

Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.

Known issues

• IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
• IE 11 does not vertically align items correctly when min-height is used. See bug.

Workarounds

Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.

1. Minimum content sizing of flex items not honored
2. Column flex items set to align-items: center overflow their container
3. min-height on a flex container won't apply to its flex items
4. flex shorthand declarations with unitless flex-basis values are ignored
5. Column flex items don't always preserve intrinsic aspect ratios
6. The default flex value has changed
7. flex-basis doesn't account for box-sizing: border-box
8. flex-basis doesn't support calc()
9. Some HTML elements can't be flex containers
10. align-items: baseline doesn't work with nested flex containers
11. Min and max size declarations are ignored when wrapping flex items
12. Inline elements are not treated as flex-items
13. Importance is ignored on flex-basis when using flex shorthand
14. Shrink-to-fit containers with flex-flow: column wrap do not contain their items
15. Column flex items ignore margin: auto on the cross axis
16. flex-basis cannot be animated
17. Flex items are not correctly justified when max-width is used

这篇关于显示:flex 不适用于 Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！