使css网格与微软浏览器兼容

Question

我正在尝试构建一个css布局网格，我以这种方式使用网格简写版本：

body{
grid:
        [row-one] "grid-col-1 grid-col-1" 1fr [row-one-end]
        / 1fr 1fr;

}

现在，我只使用fr单位，所以我决定这样做：

@mixin grid-template($row,$col){
  grid: repeat($row, 1fr) / repeat($col,1fr)
}

然后在身体css我有：

@include grid-template(1,2);

这是一种正确的方法吗？以及如何使用-ms-前缀？

之类的东西

@mixin grid-template($row,$col){
      grid: repeat($row, 1fr) / repeat($col,1fr)
      -ms-grid: repeat($row, 1fr) / repeat($col,1fr)
    }

会奏效吗？感谢

Answer 1

不确定“微软浏览器”是什么意思，但是边缘16（当前版本）is compatible没有问题。

对于Internet Explorer，版本10和11与网格布局的旧规范兼容，后者更受限制且具有different property names。因此，只需添加-ms即可，您需要处理属性名称差异。 Autoprefixer可以为您执行此操作，但您需要设置该选项，因为默认情况下它已被禁用。

就个人而言，我只会向IE提供浮动，内联块，弹性等服务。 CSS Grid规范is extremely good at overriding any of those fallbacks，应该非常流畅。