2014-04-12 12 views
9

Sto cercando di far funzionare il flex box in IE10 ma non funziona. Safari, Chrome e Firefox funzionano bene, ma IE10 non vuole funzionare. Qualcuno conosce la risposta?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

è possibile fornire un codepen o violino? –

+0

Inoltre, per favore espandi ciò che non funziona: ignora completamente gli stili, o semplicemente non espone come vuoi/aspettati? Sii specifico. – IMSoP

+0

caniuse.com: _In IE10 e IE11, i contenitori con 'display: flex' e' flex-direction: column' non calcolano correttamente le dimensioni dei bambini flessi se il contenitore ha 'min-height' ma nessuna proprietà 'height' esplicita . [Vedi bug] (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11 -preview) ._ –

risposta

22

Per IE10, arco devono essere visualizzati come inline-block per attivare il layout in qualche modo.


test qui se lo fissa: http://codepen.io/gc-nomade/pen/lhsEt

+0

Nulla cambia in IE10 – user3071261

+0

@ user3071261 ok , quindi ha a che fare con gli span, impostarli come: 'span {display: inline-block;}' per attivare il layout –

+0

Ora funziona bene! Grazie mille – user3071261