如何在 CSS 中检测浏览器是 IE 11 还是 Edge？

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)

但这在 edge 中不起作用，所以我必须将 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 < 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 网格（不支持来自新网格的装订线）

NOTES: Microsoft 实现了第一个网格实现，之后其他浏览器更改了规范，并在几年后实现了自己的实现。 MS 花了几年时间才符合 IE Edge 16 的新规范。这就是为什么有一个 MS 网格实现和一个网格实现。

如何在 CSS 中检测浏览器是 IE 11 还是 Edge？

How to detect in CSS if browser is IE 11 or Edge?

css

internet-explorer

internet-explorer-11

microsoft-edge