Почему -ms-grid-row не будет работать, если он находится перед grid-row?

Question

У меня есть некоторые CSS классы, определенные следующим образом:

  .class-1,
  .class-2 {
    grid-row: 1/2;
    -ms-grid-row: 1;
  }

, и они ведут себя, как и ожидалось. Однако, если я поменяю порядок свойств, т.е. изменим его на

  .class-1,
  .class-2 {
    -ms-grid-row: 1;
    grid-row: 1/2;
  }

, тогда IE не увидит свойство -ms-grid-row (согласно инспектору инструментов разработчика, это не так там). Chrome видит строку сетки в обоих случаях.

Есть идеи, почему это может произойти или при каких условиях это может произойти? Я никогда не сталкивался с этой проблемой раньше. Я также использую Sass, если это актуально

Answer 1

Я сделал простейший пример, но не воспроизвел проблему. Пример кода как ниже:

.class-1,
.class-2 {
  -ms-grid-row: 1;
  grid-row: 1/2;
}

<div class="grid-container">
  <div class="class-1">1</div>
  <div class="class-2">2</div>
</div>

В IE он может распознавать -ms-grid-row свойство, несмотря на порядок:

Также я думаю, что это не связано с sass, так как sass в конечном итоге перейдет в css при использовании. Если проблема не устранена, вы можете предоставить минимальный образец для ее воспроизведения, а затем мы можем выполнить тест и посмотреть, что является причиной проблемы.

Answer 2

-ms-grid-row не работает, если он предшествует grid-row?

Поскольку IE имеет свойство grid-row, но оно не реализовано стандартным способом , и браузер примет последнее свойство, которое он распознает (это поведение по умолчанию в css).

Если вы хотите ограничить -ms-grid-row только IE и поместите его после того, как вы сможете использовать @support или @media (это хакерский способ), например:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  -ms-grid-row: 1;
}

Будет работать только в IE.