Flexbox макет не работает в Internet Explorer 10

http://jsfiddle.net/J8rL7/87/Flexbox макет не работает в Internet Explorer 10

Согласно http://caniuse.com/#feat=flexbox

Он должен работать для IE10 с поставщика префиксом.

Но это не так!

UPDATE: И я только что проверил в последнем Firefox, он выглядит полностью сломанным.

Почему?

<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;"> 
    <div style="width:50px;height:100%;"> 
     <div class="fluid-column" style="height:80%;background-color:green;"> 
      <div class="box" style="background-color:#ff99cc;height:25%;">1</div> 
      <div class="box" style="background-color:#ff33cc;height:50%;">2</div> 
      <div class="box" style="background-color:#ff66cc;height:25%;">3</div> 
     </div> 
     <div class="fix-column" style="height:20%;background-color:violet"> 
      <div class="box" style="background-color:orange;height:50%;">Total</div> 
      <div class="box" style="background-color:blue;height:50%;">Test</div> 
     </div> 
    </div> 
</div> 

body, html{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 

div{ 
    text-align:center; 
    } 

.box 
{ 
    display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center; 
    display:-ms-box;-ms-box-pack:center;-ms-box-align:center; 
    display:-moz-box;-moz-box-pack:center;-moz-box-align:center; 
}

источник

2013-06-17 HelloWorld

Он выглядит так же для меня в IE10, Chrome и Safari. Как это должно выглядеть? Могли бы вы добавить макет изображения о том, как он должен появиться, или подробное описание макета, который вы пытаетесь достичь? –

разве это не должно быть '-ms-flex-pack, -ms-flex-align'? – stackErr

@MattCoughlin В Chrome текст выравнивается по вертикали. Но не в FF и IE10 и -ms-box-align: центр должен вертикально выравнивать его, когда -ms-box-orientation: используется вертикально. Я просто забыл скопировать/вставить его ... но с ним это не сработает. – HelloWorld

Вам необходимо внимательно прочитать заметки о caniuse. «Частичная поддержка» относится к поддержке одного из двух старых черновиков, и они не отмечают, какой браузер поддерживает этот проект. IE10 поддерживает March 2012 draft, и это единственное, что известно об этом.

http://codepen.io/cimmanon/pen/ApHEy

.box { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    /* fix for old FF */ 
    width: 100%; 
}

источник

2013-06-17 21:10:01 cimmanon

ok, затем обменивается IE10 (который работает сейчас) с FF21, потому что он сломан: http://jsfiddle.net/J8rL7/98/ Это ошибка? – HelloWorld

«Последний» Firefox по-прежнему использует устаревшую реализацию 2009 года, полную ошибок. Я добавил исправление. – cimmanon

Эй, это даже работает для последнего сафари. 5.1.7 Я удивлен. – HelloWorld

Для Firefox, вам нужно дать ширину элементы, которые вы хотите видеть укладки.

http://jsfiddle.net/J8rL7/101/

#wrapper div {width:100%;}

источник

2013-06-17 21:36:53

да, но cimmanon был быстрее ;-) – HelloWorld

Без проблем :), все готово –

Flexbox макет не работает в Internet Explorer 10

ответ

Смежные вопросы