logo标签列表

在Internet Explorer浏览器上，display:flex属性无法正常工作。

htmlcssflexbox
17

我的Flex容器：

.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%;
}

其他浏览器都正常。
ie11 : http://take.ms/68dHo ;
chrome : http://take.ms/JhcEH
有什么问题吗？

你能展示一下你的代码吗？比如HTML和CSS部分？ - webta.st.ic
2个回答
70

由于以下原因，Internet Explorer对Flexbox的支持并不完全：

部分支持是由于存在大量错误（请参见已知问题）。

enter image description here 来自caniuse.com的屏幕截图和信息

注意事项

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

已知问题

  • 在IE 11中，需要将单位添加到第三个参数（flex-basis属性），请参阅MSFT文档。
  • 在IE10和IE11中，具有display: flex和flex-direction: column的容器如果没有显式的height属性但有min-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. 列弹性元素不总是保持内在宽高比
  6. 默认弹性值已改变
  7. flex-basis不支持box-sizing: border-box
  8. flex-basis不支持calc()
  • 有些HTML元素不能成为弹性容器
  • align-items: baseline与嵌套的弹性容器不兼容
  • 在换行弹性项目时，最小和最大尺寸声明被忽略
  • 内联元素不视为弹性项
  • 使用flex简写时，在flex-basis上忽略了important属性
  • 使用flex-flow: column wrap的Shrink-to-fit容器不包含其项目
  • 列方向弹性项在交叉轴上忽略margin: auto
  • flex-basis无法进行动画处理
  • 当使用max-width时，弹性项的对齐方式不正确
    • 1
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接