Flexbox IE10 genişlik sorunları

Question

Sorun, IE10'da satır içindeki sütunların genişliğinin yanlış hesaplanmasıdır; sütun kenarlarının genişliğine eklenir (toplam 80px'de), ancak Firefox ve Chrome'da mükemmel bir şekilde hesaplar ve 1260px'in içindeki herşeye uyar. Asıl mesele şu ki, doğru yol olduğuna inandığım herşeyi önüme aldım, ama yine de sorunu çözüyorum.

Sen jsFiddle burada görebilirsiniz - http://jsfiddle.net/andyjh07/ue2zfga6/

CSS:

Chrome'un, IE11 görünüyor nasıl

.row { 
    width: 100%; 
    position: relative; 
    background: red; 
    display: box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    box-orient: vertical; 
    -webkit-flex-direction: column; 
    -moz-flex-direction: column; 
    flex-direction: column; 
    -ms-flex-direction: column; 
    margin-bottom: 40px; } 

    .row:after { 
    content: ""; 
    display: table; 
    clear: both; } 

    .row *[class^="col-"] { 
    position: relative; 
    display: block; 
    height: auto; } 

    .row *[class^="col-"]:first-child { 
     margin-left: 0; } 
    @media (min-width: 64em) { 
    .row { 
     box-orient: horizontal; 
     -webkit-flex-direction: row; 
     -moz-flex-direction: row; 
     flex-direction: row; 
     -ms-flex-direction: row; } } 
    @media (min-width: 78.75em) { 
    .row { 
     max-width: 78.75em; 
     margin: 0 auto; } } 


.col-one-third { 
    width: 100%; 
    background: blue; } 
    @media (min-width: 64em) { 
    .col-one-third { 
     width: 33.3%; 
     margin-left: 40px; } } 


.col-two-thirds { 
    width: 66.7%; 
    margin-left: 40px; 
    background: blue; } 

Firefox içeride taklit, IE 10 görünüyor nasıl

IE11'in dev konsolu/araçları

Gördüğünüz gibi, kenar boşluğu eklenir ve kapsayıcının genişliğinin ötesine geçiyor ve

Answer 1

Kullanılabilir IE10'um yok, ancak caniuse.com'a bakmanız ve bilinen sorunlar gibi görünüyor. Ya da belki de Github'daki bu user moderated list. Ya da belki css-tricks guide'un yorum bölümü.

caniuse sitesi bahseder: Flex için

IE10 ve IE11 varsayılan değerler Eylül 2013.

ve

itibariyle taslak spec göre, 0 1 auto yerine 0 0 auto vardır

IE10 ve IE11'de, ekranlı kutular: esnek ve esnek yön: sütun kapsayıcıda varsa, esnekleştirilmiş çocukların bedenlerini uygun şekilde hesaplayamaz n yükseklik ama açık yükseklik özelliği yok.

Github sitesi bahseder:

hizaya-öğeleri kullanarak: merkezini kolon yönünde bir esnek ambalaj üzerinde, esnek öğenin içeriğini, çok büyük olursa, taşma onların IE 10-11'de konteyner.

Çözüm Çoğu zaman

, bu basitçe max-width ayarlayarak sabitlenebilir:% 100 esnek öğe üzerinde. Esnek öğenin bir dolgu veya kenarlık kümesi varsa, o alanı hesaba katmak için kutu boyutlandırma: kenarlık kutusunu da kullandığınızdan emin olmanız gerekir. Esnek öğenin bir kenar boşluğu varsa, yalnızca kutu boyutlarını kullanmanız işe yaramaz. Bu nedenle, bunun yerine dolgu malzemesi olan bir kapsayıcı öğesi kullanmanız gerekebilir.

-webkit-flex-direction: column; 
-moz-flex-direction: column; 
flex-direction: column; 
-ms-flex-direction: column; 

:

Bu comment on css-tricks

normalde flex: 1; söyleyebilirim nereye sen böyle bir şey yapar kodunuzu değiştirmeniz gerekir, ayrıca -ms-flex: 1 0 auto;

söylemek gerektiğini göstermektedir

bunu için:

-webkit-flex-direction: column; 
-moz-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: column; 

Hep önek Listenin altındaki bayrakları olmadan kod — biri doğru çizgi — istiyorum.