Flexbox

IE10'da çalışırken esnek kutu almaya çalışıyorum ama çalışmıyor. Safari, Chrome ve Firefox çalışıyor, ancak IE10 çalışmak istemiyor. Cevabı bilen var mı?Flexbox

codepen: IE10 için 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;

kaynak

2014-04-12 user3071261

Bir codepen sağlamak veya oynama işini? –

Ayrıca, ne çalışmıyor üzerinde genişletin lütfen: Tamamen stilleri görmezden mi, yoksa sadece nasıl istediğini/olmasını beklemiyor mu? Açık ol. – IMSoP

caniuse.com: _ IE10 ve IE11'de, “flex” ve “flex-direction: column” olan kaplar, konteyner “min-height”, ancak herhangi bir “height” özelliği içermiyorsa, esnekleştirilmiş çocukların bedenlerini uygun şekilde hesaplamayacaktır. . [Hataya bakın] (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11 -preview) ._. –

, yayılma nasılsa düzenini tetiklemek için inline-block olarak görüntülenmesi gerekir. Burada

Testi bunu düzeltir eğer: http://codepen.io/gc-nomade/pen/lhsEt

kaynak

2014-04-12 14:59:32

Hiçbir şey IE10 – user3071261

@ user3071261'de değişiyor Bu yüzden, bu açıklıklar ile ilgili yapmak zorunda: 'span {display: inline-block;}' düzenini tetiklemek için –

Şimdi iyi çalışıyor! – user3071261

cevap

İlgili konular