Question

我正在尝试使用网格布局，但IE 11和Edge（15及以下版本）不支持网格的当前实现。我一直在读你应该有一个后备设计（通常只是你的移动布局），我将使用flexbox。

我并不关心IE 11以外的任何事情。

我知道我可以使用@supports not (display: grid)并将我的flexbox代码粘贴在该块中，这适用于Edge但IE 11不支持@support标记。

我在阅读IE 11时可以使用@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

但这在边缘不起作用，所以我必须两次复制我的flexbox css代码。进入@media检查，进入@supports。

如果可能，我想将支票合并为一个。

示例：

/* use this for anything that supports grid layout */
@supports (display: grid){
    .container {
        display: grid; 
    }

}

/* need to wrap this around with something that will only render on IE 11 or Edge 15 and below */
.container {
    display: flex;
}

Answer 1

专门针对IE10,11和Edge＆lt; 16.以下是处理IE和Grid支持浏览器的方法：

在网格中，您需要设置MS网格和新网格：

.my-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 500px auto auto;
  grid-template-rows: 500px auto auto;
  -ms-grid-columns: 1fr 400px;
  grid-template-columns: 1fr 400px;
}

然后，您需要在每个部分使用-ms个供应商前缀以及常规的非前缀部分。基本上你将实现两个网格。如果你只想在IE上使用flex，那么你就提到了：

.my-grid {
  display: flex;
  display: grid;
  grid-template-rows: 500px auto auto;
  grid-template-columns: 1fr 400px;
  /* since IE doesn't support display: grid; the last two lines won't matter */
}

我的建议是：

移动首先使用flex
所有主流浏览器支持的新网格网格
MS Grid（不支持来自新网格的排水沟）

注意：Microsoft制作了第一个网格实现，之后其他浏览器更改了规范，并在几年后实现了自己的实现。花了几年的时间来匹配IE Edge 16上的新规范。这就是为什么有MS网格实现和网格实现的原因。

如果浏览器是IE 11或Edge，如何在CSS中检测？

1 个答案: