ie10 和弹性盒子？ （恶梦）

Posted 2023-03-06

【中文标题】ie10 和弹性盒子？ （恶梦）

【英文标题】：ie10 and flexboxes? (nightmare)

【发布时间】：2013-09-13 17:05:46

【问题描述】：

不幸的是，我必须使我的网站代码与 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-”预先固定的东西？？谁能澄清为什么会这样？

谢谢！ :-)

【问题讨论】：

不知道旧的 display: flexbox 语法 - 我不确定这些属性是否适用。

感谢 BoltClock 的回复！你能详细说明一下吗？您的意思是“-ms-flex-flow”等属性在ie10中不起作用吗？尝试为此编写代码真的很尴尬，因为 ie11 支持最新版本的 flexbox 语法，但不支持 ie10

嗯，我已经阅读了 Teemu 页面，当我复制粘贴他们列出的内容时，ie10 没有检测到它？？？它只将“-ms-flexbox”检测为 .uberflex 类的属性，仅此而已:(我的 ie10 版本是 10.0.9200.16660

嗯...看起来是个老文档，你见过this one吗？

是的，我尝试使用这些，我只是在 ie10 的前面添加“-ms-”对吗？我写了“-ms-align-items: flex-start;”它不会检测到它在 ie10 上。顺便说一句，我正在使用 Windows 7（同时使用 Mac）。

【参考方案1】：

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

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

---

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

用于隔离 IE10 特定 CSS 的标志

.lt-ie11 &

---

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

定义一个 Flex 容器

display: -ms-flexbox;

.

水平对齐：

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

。

垂直对齐

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

---

以下定义应放在 child 元素（“item”）中

元素排序

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

-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的一般性讨论可以看here，快速查找是here

【讨论】：

桑吉尔写得很棒。 :-)