сетка-шаблон-столбцы для IE11?

Question

Так что у меня есть этот сайт, который отлично работает на chrome, но не на IE11. Я проверил, какой CSS он не получает в IE11, и вижу, что как только я отключаю: grid-template-columns на моем chrome веб-сайте, он делает то же самое, что и в IE11. Он больше не помещает элементы рядом друг с другом, потому что ширина столбцов установлена ​​на 100% из внешнего файла. Я думаю, это можно изменить, но мне интересно, есть ли способ заставить это поведение работать в IE11? Код:

grid-template-columns: repeat(3,1fr);

Я обнаружил, что он действительно не поддерживается IE11:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

Answer 1

Вы можете написать это вместо IE11 для замены grid-template-columns:

-ms-grid-columns: 1fr 1fr 1fr;

Или

-ms-grid-columns: (1fr)[3];

Вот еще одна ссылка, касающаяся IE11-различий в CSS свойствах сетки по CSS -Tricks . От самой SO кто-то опубликовал ссылку о проблемах использования префиксов с макетом сетки IE, и ответ может помочь вам .

Система сетки в IE11 также не поддерживает автоматическое размещение товара. Это означает, что вы должны явно определить положение элемента сетки в сетке. Например:

.grid {
  display: -ms-grid;
  -ms-grid-columns: (1fr)[2];
}

.grid-item-one {
  -ms-grid-column: 1; /* Place on column number one */
  -ms-grid-row: 1; /* Place on row number one */
}

.grid-item-two {
  -ms-grid-column: 2; /* Place on column number two */
  -ms-grid-row: 1; /* Place on row number one */
}