显示：flex在Internet Explorer上不起作用 [英] display: flex not working on Internet Explorer

问题描述

My flex容器：

  .back_pattern {
 display：flex; 
显示：-ms-flexbox; 
 -ms-flex-pack：center; 
 flex-direction：column; 
 align-content：center; 
 justify-content：center; 
最小高度：100vh; 
宽度：100％; 
} 
  

在其他浏览器上一切正常。

ie11：< a href =http://take.ms/68dHo =nofollow noreferrer> http://take.ms/68dHo ;

chrome：
_{截图和从 caniuse.com}

已知问题：

• IE 11需求需要将一个单元添加到第三个参数中，flex-basis属性请参阅MSFT文档。
  
• 在IE10和IE11中，带有的容器显示：flex min-height 和 flex-direction：column 将无法正确计算其折叠后的儿童的尺寸c>但不显式 height 属性。 flex 的默认值为<$>
c $ c> 0 0 auto 而不是 0 1 auto 在最新规范中定义

• 当使用 min-height 时，IE 11不会正确地将项目对齐。 查看错误。

解决方法

<一个href =https://github.com/philipwalton/flexbugs =noreferrer> Flexbugs 是社区策划的Flexbox问题列表和针对它们的跨浏览器解决方案。以下列出了所有可用解决方法的错误以及影响到的浏览器。

1. 弹性项目的最小内容大小不符合 com / philipwalton / flexbugs＃flexbug-2rel =noreferrer>将列flex项设置为 align-items：center 溢出其容器


2. min-height 在柔性容器上不适用于其flex项目


3. flex 无单位基于flex-basis 的速记声明被忽略


4. 专栏 flex 项目don总是保留内在的长宽比


5. 默认弹性值已更改


6. flex-basis 不包含 box-sizing：border- box


7. flex-basis 不支持 calc（）


8. 一些HTML元素不能是flex容器


9. align-items：baseline 不会使用嵌套的柔性容器


10. 最小值和最大值尺寸声明在包装弹性物品时被忽略


11. 当使用flex速记时，重要性在flex的基础上被忽略 使用 flex-flow：列换行缩小至合适的容器不包含其项目
    
12. Column flex items忽略 margin：auto 横轴


13. flex-basis 不能动画


14. 当使用 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}

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屋！