Как работать вокруг IE10 переполнения Flexbox ошибка

С этой структуройКак работать вокруг IE10 переполнения Flexbox ошибка

<div id="twitter"> 
    <div class="info"> 
    <div> 
     <span>Tweets</span> 
     <span class="count">561</span> 
    </div> 
    <div> 
     <span>Followers</span> 
     <span class="count">250</span> 
    </div> 
    <div> 
     <span>Following</span> 
     <span class="count">129</span> 
    </div> 
    </div> 
</div>

и этот CSS

#twitter { 
    width: 220px; 
    padding: 10px; 
    background: #10A4FA; 
} 
.info { 
    display: flex; 
    justify-content: space-around; 
} 
.info span { 
    font-size: 14px; 
} 
.info span.count { 
    font-size: 24px; 
}

отображается как вершина в IE11 и в большинстве браузеров, но, как дно в IE10 (эмулировать в IE11 DevTools)

Here is a codepen showing it.

Я попытался добавить max-width: 100% в .info, различные box-sizing и flex-grow вещи, и добавление префиксов мс, но я не могу заставить его вести себя в IE10

источник

2016-09-02 binaryfunt

Не могли бы вы добавить
после вашего пролета? Я также обнаружил, что иногда мне приходится устанавливать ширину элементов flex, которые составляют до 100%, чтобы заставить их работать в старом IE. – kthornbloom

@kthornbloom добавление '
' 'делает вид работы (по некоторым причинам он имеет тот же эффект, что и' .info span {display: block;} '), но позиционирование 3 divs немного отличается в результате – binaryfunt

IE10 поддерживает предыдущую версию спецификации flexbox и требует * префиксов поставщиков *. См. Здесь для деталей: http://stackoverflow.com/a/35137869/3597276 –

попробовать этот

.info > div{ 
width: 33.33% 
{

его потому что ширина гибкости в элементах поддерживается в IE10. поэтому дайте ему ширину до 33,33%

источник

2016-09-02 17:47:04 rmarif

Это работает, но он немного меняет расположение трех div (по сравнению с тем, как он должен выглядеть, например, IE11) – binaryfunt

Как работать вокруг IE10 переполнения Flexbox ошибка

ответ

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