为什么线性渐变在 Edge 中不起作用？

Question

我做了渐变。这适用于 Firefox 和 Chrome。但是在 Edge 中渐变是无效的。参考了Autoprefixer、MDN等工具和文档，也没找到原因。

如何解决 Edge 中的这个错误？

.grad {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

---

• Edge：Microsoft Edge 44.18362.449.0，Microsoft EdgeHTML 18.18363
• 火狐：76.0
• Chrome: 81.0.4044.138

Answer 1

你有没有检查它是否有填充。如果你点击确定，那么在这里你可以看到你的 padding 和 margin 属性。或者您尝试从 Internet 工具中获取渐变。

或者问题出在浏览器上。边缘不是最好的。

.grad {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

Answer 2

MS Edge 无法理解 linear-gradient 规范中的两个相邻位置。因此，您应该将 linear-gradient(..., #000 6px calc(6px + var(--w)), ...) 替换为 linear-gradient(..., #000 6px, #000 calc(6px + var(--w)), ...)。

下面的演示，在 Edge 44 (18) 上运行良好。

span {
  --w: 3px;
}
.grad {
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px, #000 calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

显然 MS Edge 没有正确解析或处理 color-stop-length 生成的 mini grammar for linear gradient arguments. The respective demo widget on MDN 也没有显示。