2014-04-12 16 views
9

Ich versuche, Flex-Box in IE10 arbeiten, aber es funktioniert nicht. Safari, Chrome und Firefox funktionieren gut, aber IE10 will nicht funktionieren. Jeder kennt die Antwort?Flexbox in IE10

codepen: http://codepen.io/anon/pen/vcEGH/

display: -moz-box;    /* OLD - Firefox 19- (doesn't work very well) */ 
    display: -ms-flexbox;   /* TWEENER - IE 10 */ 
    display: -webkit-flex;   /* NEW - Chrome */ 
    display: flex;     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 

    -webkit-box-lines: multiple; 
    -moz-box-lines: multiple; 
    -ms-flex-wrap: wrap; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 

    -webkit-box-pack: justify; 
    -moz-box-pack: justify; 
    -ms-flex-pack: justify; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
+1

können Sie eine codepen liefern oder Geige? –

+0

Bitte erweitern Sie auch, was nicht funktioniert: ignoriert es völlig die Stile, oder einfach nicht, wie Sie wollen/erwarten? Sei genau. – IMSoP

+0

caniuse.com: _In IE10 und IE11 berechnen Container mit 'display: flex' und' flex-direction: column' ihre gebeugten Children's-Größen nicht korrekt, wenn der Container 'min-height' aufweist, aber keine explizite' height' Eigenschaft . [Siehe Bug] (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie--10-11 -preview) ._ –

Antwort

22

Für IE10 sollte Spanne als inline-block angezeigt Layout irgendwie auszulösen.


Test hier, wenn es behebt es: http://codepen.io/gc-nomade/pen/lhsEt

+0

Nichts ändert sich in IE10 – user3071261

+0

@ user3071261 in Ordnung , so dass es mit den Spannen zu tun hat, setze sie wie folgt: 'span {display: inline-block;}' zum Auslösen des Layouts –

+0

Jetzt funktioniert es gut! Vielen Dank – user3071261