在IE10中的Flexbox

我試圖讓Flex框在IE10中工作，但它不工作。 Safari，Chrome和Firefox工作正常，但IE10不想工作。任何人都知道答案？在IE10中的Flexbox

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;

來源

2014-04-12 user3071261

你可以提供一個codepen或擺弄？ –

另外，請詳細說明什麼是不工作的：它是完全忽略了風格，還是隻是不說明你想要的/期望的方式？請明確點。 – IMSoP

caniuse.com：在IE10和IE11中，如果容器具有「最小高度」但沒有明確的「高度」屬性，則具有「display：flex」和「flex-direction：column」的容器將無法正確計算其摺疊兒童的尺寸。 [查看錯誤]（https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11 -preview）._ –

對於IE10，跨度應顯示爲inline-block以某種方式觸發佈局。這裏

測試是否能解決它：http://codepen.io/gc-nomade/pen/lhsEt

來源

2014-04-12 14:59:32

IE10沒有什麼變化 – user3071261

@ user3071261好嗎，所以它與跨度有關，將它們設置爲：'span {display：inline-block;}'來觸發佈局 –

現在它工作正常！非常感謝你 – user3071261

在IE10中的Flexbox

回答

相關問題