如果 -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

-ms-grid-row not work if it comes before grid-row?

因为 IE 有 grid-row 属性，但不是以标准方式实现的，浏览器会取其识别的最后一个属性（这是 css).

如果您只想将 -ms-grid-row 限制为 IE 并将其放在您可以使用 @support 或 @media 之后（这是一种 hacky 方式），例如：

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

仅适用于 IE。

Answer 2

我做了一个最简单的示例，但没有重现问题。示例代码如下：

.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。如果问题仍然存在，您可以提供一个最小的样本来重现它，然后我们可以进行测试，看看是什么原因造成的。

Why would -ms-grid-row not work if it comes before grid-row?