CSS变量在Microsoft Edge中的工作方式是否不同？

Question

我正在开发一个网站，并已针对Firefox和Chrome进行了优化。该项目包含一个名为base.css的样式表，它包含在所有页面中，并且包含一些全局设置和定义，包括我用来存储颜色值的变量列表，如下所示：

:root {
    --yellow-1: #fff8e3;
    --yellow-2: #ffe9a9;
}

以此类推，并像这样调用它们：

.a-class {
    background-color: var(--yellow-2);
}

Edge不支持这种方式的CSS变量吗？我能做些什么来解决这个问题？

Answer 1

MS Edge不支持来自EdgeHTML v15的CSS变量：

https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/

这也备份在这里：

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

语法如下：

声明变量的：

element {
  --main-bg-color: brown;
}

使用变量：的

element {
  background-color: var(--main-bg-color);
}

Answer 2

我也有同样的问题，但是我定义了不透明的变量。在Chrome中它运行得很好，但在edge中就不行了，在我去掉声明中的不透明度之后，它在Edge中也运行得很好。

Answer 3

我试着隔离这个问题，在Edge中似乎没有问题。正常的CSS按照预期的方式工作。

选择浏览器前缀元素时，如：

::-ms-track
::-ms-fill-lower
::-ms-fill-upper
::-ms-thumb

变量不适用于这些变量。