使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

不确定您所说的“微软浏览器”是什么意思，但 Edge 16（当前版本）is compatible 与 CSS 网格没有问题。

对于 Internet Explorer，版本 10 和 11 与旧的网格布局规范兼容，该规范受到更多限制并具有different property names。因此，仅添加 -ms 是不行的，您需要注意属性名称的差异。 Autoprefixer 可以为您做到这一点，但您需要设置该选项，因为它默认处于禁用状态。

就我个人而言，我只会为 IE 提供浮动、内联块、flex 等的后备服务。 CSS Grid 规范is extremely good at overriding any of those fallbacks，所以应该很流畅。