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

Question

我正在尝试构建一个 css 布局网格，我以这种方式使用网格 shorthand 属性：

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

不确定 "microsoft browser" 是什么意思，但是 Edge 16（当前版本）is compatible 和 CSS 网格没有问题。

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

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

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

make css grid compatible with microsoft browser

html

css

sass

css-grid