multiline-flexbox в IE11 неправильно вычисляет ширину?

кажется, IE11 не вычисляет ширину элемента flex должным образом, если есть.

см.http://jsfiddle.net/MartijnR/WRn9r/6/

4 коробки каждая имеют flex-basis: 50%, поэтому мы должны получить две строки по две коробки, но в IE11 каждая коробка получает одну строку. При установке границы в 0 она работает правильно.

любая идея, если это ошибка, или если есть способ заставить IE11 вести себя (и все еще использовать границы)?

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

P. S. В моем проекте только последние версии популярных браузеров, нуждается в поддержке, к счастью, но в IE11 является одним из них.

33
css css3 flexbox internet-explorer-11

4 ответов

это похоже на ошибку, где box-sizing не учитывается при расчете размера с помощью flex собственность. Поскольку граница занимает 2px, она больше 50% и, таким образом, только одна подходит к линии, поэтому все коробки растягиваются на всю ширину. Вы можете увидеть то же самое, если вы отключите границу и вместо этого добавите 2px-заполнение.

вы можете заставить его работать правильно, сохраняя границы, добавив max-width: 50% до .box набор правил. В противном случае вы можете использовать значение flex между 33.34% и 49%. Это сделает ширину менее 50%, включая границу, и по мере того, как элементы будут расти, чтобы заполнить доступное пространство, они все равно будут 50% контейнера flex. Вид уродливого взлома, но он будет работать, если вы не добавите комбинированную границу и заполнение больше 50% минус значение flex, которое вы установили.

возможно, лучший способ, чем уменьшение процентного значения напрямую, - использовать calc(). Это поддерживается всеми браузерами, поддерживающими современный синтаксис Flexbox. Вам просто нужно вычесть общую сумму левого и правого отступов и полей из процентного значения, которое вы хотите использовать. Когда вы это делаете, вам действительно не нужно свойство размера коробки, чтобы его можно было удалить. Кажется, есть еще одна проблема в IE, где вы не можете использовать calc в flex стенографии, но вы можете использовать его в flex-basis свойство, которое вы хотите.

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

см. демо:http://jsfiddle.net/dstorey/78q8m/3/

34

я получил обходной путь на форуме Microsoft от Роба. Смотри http://social.msdn.microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seem-to-calculate-widths-correctly-boxsizing-ignored?forum=iewebdevelopment

задание min-width и изменение к flex:auto заставляет коробки вести себя, поддерживая их flexiness.

см.http://jsfiddle.net/MartijnR/WRn9r/23/ и ниже Для немного более продвинутого примера с обходным путем:

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}
10

Филип Уолтон имеет отличное резюме этой ошибки здесь: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box - ... Он предлагает два решения, самым простым из которых является set flex-basis: auto и объявить width вместо. (Не max-width или min-width.) Это решение имеет то преимущество, что не нужно настраивать calc() при изменении ширины прокладки или границы.

7

это явно ошибка IE поэтому оставьте оригинальный [правильный] CSS и добавьте хак, который нацелен на IE10+:

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/

6