时间戳

首页 > 解决方案 > SASS 将 -ms 前缀添加到 css 网格，但它在 IE 中不起作用

html - SASS 将 -ms 前缀添加到 css 网格，但它在 IE 中不起作用

问题描述

当我们使用 sass 时，它会自动为不同的浏览器添加前缀。

萨斯代码

.grid-container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: 1fr 1fr;
}

CSS代码

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
}

它还为网格列添加了 Internet Explorer 前缀 (-ms)。但是 Internet Explorer 仍然不支持 css 网格。这是什么意思？那么为什么在我使用 sass 时它包含 -ms 前缀来显示网格，除非 IE 不支持 css 网格？

标签： htmlcssinternet-explorersasscss-grid

解决方案

IE 需要的不仅仅是-ms-带有 grid 的前缀。IE 没有网格元素的自动流动。如果要在 IE 中使网格工作，则需要为每个网格元素分配特定的网格位置。

请参考下面的示例，它可以在 IE 11 中正常工作：

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.item1 {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.item2 {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.item3 {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
}

.item4 {
  -ms-grid-column: 4;
  -ms-grid-row: 1;
}
<div class="grid-container">
  <div class="item1">111</div>
  <div class="item2">222</div>
  <div class="item3">333</div>
  <div class="item4">444</div>
</div>

推荐阅读