Flexbox Проблемы с шириной IE10

Проблема в том, что в IE10 ширина столбцов внутри строки вычисляется неправильно, она, похоже, добавляет ширину полей столбца (всего 80 пикселей), но в Firefox и Chrome она отлично вычисляет и подходит для всего внутри 1260px. Основная проблема заключается в том, что я превзошел все в том, что я считаю правильным, но я все еще получаю эту проблему.

Вы можете увидеть это здесь, на jsFiddle - http://jsfiddle.net/andyjh07/ue2zfga6/

CSS

.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; }

Как выглядит Chrome, IE11, Firefox How it looks on Chrome, IE11, Firefox

Как он выглядит на IE 10, эмулируется внутри IE11 dev console/tools How it looks on IE 10, emulated inside IE11's dev console/tools

Как вы можете видеть, маржа добавляется и выходит за пределы ширины контейнера

Ответы

Ответ 1

У меня нет IE10, но похоже, что вы должны посмотреть caniuse.com и известные проблемы. Или, возможно, этот пользовательский список модераторов на Github. Или, может быть, раздел комментариев руководства css-tricks.

Сайт caniuse упоминает:

Значения по умолчанию для IE10 и IE11 по умолчанию для 0 0 auto, а не 0 1 auto, согласно спецификации проекта, по состоянию на сентябрь 2013 года.

и

В IE10 и IE11 контейнеры с дисплеем: flex и flex-direction: столбец неправильно вычисляет размеры их гибких детей, если контейнер имеет минимальную высоту, но не имеет явного свойства высоты.



Сайт Github упоминает:

При использовании элементов выравнивания: в центре контейнера flex в направлении столбца содержимое элемента гибкости, если оно слишком велико, переполнит контейнер в IE 10-11.

Обход

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



Этот комментарий к css-трюкам показывает, что там, где вы обычно говорите flex: 1;, вы должны сказать -ms-flex: 1 0 auto;



Кроме того, вы должны изменить свой код, где он делает что-то вроде этого:

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

:

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

Вы всегда нуждаетесь в правильной строке кода: один без флагов — в нижней части списка префиксов.