13

不幸的是，我必须使我的网站代码与 Internet Explorer 10 兼容并且遇到了一些问题，即使在阅读了他们官方网站上的文档之后也是如此

这是我的CSS代码：

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-flow: column wrap;
    -ms-justify-content: flex-start;
    -ms-align-items: flex-start;
}

据我所知，ie10 支持 flexbox，但只能使用我放在这里的 '-ms-' 前缀。在ie10中检查控制台后，它看到“显示：-ms-flexbox；” 但没有其他“-ms-”预先固定的东西？？谁能澄清为什么会这样？

谢谢！:-)

4

1 回答 1

63

是的，IE 10 的 flexbox 简直就是一场噩梦。

这里有一些关于 IE 10 flexbox 支持的提示，这些提示来自几个站点（这个非常有帮助）：

首先 - 一个非常有用的标志（可以放在所有元素上）：

  • 用于隔离 IE10 特定 CSS 的标志

    .lt-ie11 & { }

以下定义应放在容器元素中

  • 定义一个 Flex 容器

    display: -ms-flexbox;

.

  • 水平对齐：

    -ms-flex-pack: start/end/center/justify;

.

  • 垂直对齐

    -ms-flex-align: start/end/center/stretch/basline;

以下定义应放在子元素（“项目”）中

  • 元素排序

    订单号可以是正数或负数。数字越小，元素越靠近容器开始出现

    -ms-flex-order [number]

.

  • 设置项目的增长/收缩/首选大小

    这是 flexbox 的一个重要概念，控制如何在 flexbox 容器的子元素之间分配额外或负（缺失）空间。

    基本上，数字越大，首选大小添加的额外空间就越多（在增长的情况下），或者从元素中减去更多的空间以使其适合（在缩小的情况下）。如果分配了“0”值，则元素的大小不会受到影响。

    -ms-flex: [grow shrink size];

    或者，简写版本：

    -ms-flex: [value]; // == -ms-flex: value value 0

    请注意，除非明确定义，否则 IE10 会给出默认的首选大小0，这可能会导致您的元素完全消失。这可以通过定义显式大小（在px或中%）或将其定义为auto）来缓解


关于 Flexbox 的一般讨论，你可以看一下这里，快速查找这里

于 2014-01-23T11:06:01.700 回答