css - 如何在 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-evenly对于 CSS 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 中将其删除.