ie10 和弹性盒?(恶梦) [英] ie10 and flexboxes? (nightmare)

问题描述

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

Unfortunately, I have to make my website code compatible with Internet Explorer 10 and am having some issues, even after reading the documentation on their official website

这是我的 css 代码:

here is my css code:

.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中查看console后，看到的是display:-ms-flexbox;"但没有其他-ms-"预先固定的东西??任何人都可以澄清为什么会发生这种情况?

To my knowledge, ie10 supports flexbox but only with the '-ms-' prefix, which I've put here. After checking the console in ie10, it is seeing the "display: -ms-flexbox;" but none of the other "-ms-" pre-fixed things?? Can anyone clarify why this is happening?

谢谢！:-)

推荐答案

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

yeah, flexbox for IE 10 is a total nightmare.

这里有一些关于 IE 10 flexbox 支持的提示，从多个站点 (这个 很有帮助):

here are some tips regarding IE 10 flexbox support scraped from several sites (this one was very helpful):

首先 - 一个非常有用的标志(可以放置在所有元素上):

first of all - a very useful flag (can be placed on all elements):

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

.lt-ie11 &{ }

• 定义 Flex 容器

显示:-ms-flexbox;

.

• 水平对齐:

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

.

• 垂直对齐

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

• 元素排序

订单号可以是正数也可以是负数.数字越小越接近容器开始元素会出现

-ms-flex-order [编号]

.

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

这是 flexbox 的一个重要概念，控制如何在 flexbox 容器的子元素之间划分额外或负(缺失)空间.

this is an important concept of flexbox, controlling how extra or negative (missing) space is divided between the child elements of a flexbox container.

基本上数字越大，为首选大小添加的额外空间就越多(在增长的情况下)，或者从元素中减去更多的空间以使其适合(在收缩的情况下).如果赋值为0"，则元素的大小不会受到影响.

Basically the higher the number, the more extra space is added to the preferred size (in the case of grow), or the more space is subtracted from the element to make it fit (in case of shrink). If a value of '0' is assigned, the element's size will not be affected.

-ms-flex: [增长缩小尺寸];

或者，简写版本:

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

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

notice that unless defined explicitly, IE10 gives a default preferred size of 0, which may cause your element to completely disappear. This can be mitigated by defining an explicit size (either in px or %), or defining it as auto)

有关 Flexbox 的一般性讨论，您可以查看此处，快速查找是这里

For a general discussion of Flexbox, you can take a look here, and a quick lookup is here

这篇关于ie10 和弹性盒?(恶梦)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！