ie10和flexboxes？ （恶梦） [英] ie10 and flexboxes? (nightmare)

问题描述

不幸的是，我必须让我的网站代码与Internet Explorer 10兼容，并且有一些问题，即使在阅读其官方网站上的文档

这里是我的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中检查控制台后，它看到display：-ms-flexbox;但没有其他的-ms-预先固定的东西？谁能澄清为什么会发生这种情况？
 
 
 
谢谢！ ： - ）
解决方案
是的，flexbox for IE 10是一个噩梦。
 
 
 
这里有一些有关IE 10 flexbox支持的提示（从这个很有帮助）：
 
 
 
 
 
 
首先是一个非常有用的标志可以放置在所有元素上）：
 
 
 
 
 
 
 隔离IE10特定CSS  > 
 
 
  .lt-ie11& {}  
 
 
 
 
 
 
 
 
 
应放置在容器元素> 
 
 
 
 
 
 定义Flex容器 
 
 
 
  display：-ms-flexbox;  
 
 
 
           p> 
 
 
  -ms-flex-pack：start / end / center / justify;  
  
  
 
 
。 
 
 
 
 
 
 
 垂直对齐 
 
 
 
 code> -ms-flex-align：start / end / center / stretch / basline;  
 
 
 
 
 
 
 
 
 
以下定义应放在子元素（项目）中
 
 
 
 
 
 
 元素订购 
 
 
 
 订单编号可以是正数或负数。 
 
 
 
  -ms-flex-order [number] 
 code> 
 
  
 
 
 
 
 
 
 $ b 
 
 设置项目的增长/缩小/首选大小
 
这是flexbox的一个重要概念，或负（缺失）空间在flexbox容器的子元素之间划分。 
 
 
 
基本上，数字越大，优选大小就会增加额外的空间（在grow的情况下），或者从元素中减去更多的空间它适合（在收缩的情况下）。如果赋值为'0'，则元素的大小不会受到影响。
 
 
 
  -ms-flex： 
 
 
 
  
 
 
 
 ms-flex：[value]; // == -ms-flex：value value 0  
 
 
 
注意，除非明确定义，IE10给出默认的首选大小 0 ，这可能会导致您的元素完全消失。这可以通过定义显式大小（在 px 或％）或将其定义为 auto ） 
 
 
 
 
 
 
有关Flexbox的一般讨论，您可以查看此处，并且快速查找此处 
 
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

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;
}
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?

Thanks! :-)
解决方案
yeah, flexbox for IE 10 is a total nightmare.

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):


flag for isolating IE10-specific CSS

.lt-ie11 & { }




the following definitions should be placed in the container element


Define a Flex container

display: -ms-flexbox; 


.


Horizontal alignment:

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


.  


Vertical Alignment

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




the following definitions should be placed in the child element (the "item")


Element Ordering

the order number can be positive or negative. the lower the number the closer to the container start the element will appear

-ms-flex-order [number]


.


Setting an item's grow/shrink/preferred size

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

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:  [grow shrink size];

or, the shorhand version:

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

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)



 

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

                        
这篇关于ie10和flexboxes？ （恶梦）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！