如何在 Edge 中检测对空间均匀的部分支持

Question

我目前正在使用以下代码space-evenly在可用的地方使用：

 display: flex;
// IE11: doesn't support space-evenly.
justify-content: space-around;

@supports (justify-content: space-evenly) {
    // Use space-evenly if supported.
    justify-content: space-evenly;
}

不幸的是，Edge 支持space-evenly但无法正确显示。

根据研究，Edge 仅在 CSS Grid 中支持它，在 flexbox 中不支持。https://caniuse.com/#search=space-evenly

问：我如何检测这种情况？

Answer 1

因为 Edge 确实识别space-evenlyCSS Grid，但不识别 Flexbox，所以@supports在这种情况下不能以正常方式工作。

Edge 确实识别space-between，所以我在类似情况下所做的是设置justify-content: space-between为默认值，然后@supports not使用只有 Edge 支持的东西才能space-evenly在其他浏览器中使用。所以我的最终代码看起来像：

.className {
  justify-content: space-between;
}

@supports not (-ms-ime-align: auto) {
  .className {
    justify-content: space-evenly
  }
}

这使得所有不支持 Edge 特定 CSS 的浏览器都将使用space-evenly. 如果您需要添加其他内容，例如外部的填充/边距，以便space-between在边缘周围显示一些空间，您可以将其添加到默认样式中，然后在@supports.