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

Question

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

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

等等，并调用它们，例如：

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

当我在 Edge 中查看页面时，所有颜色都丢失了，当我使用 DOM 资源管理器时，它用红色下划线标记了所有变量的使用。Edge不支持这种方式的CSS变量吗？我能做些什么来解决这个问题？

score 4 · Accepted Answer

MS Edge 确实支持 EdgeHTML v15 中的 CSS 变量：

这也在这里备份：

语法如下：

声明一个变量：

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

使用变量：

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

score 1 · Accepted Answer

我有同样的问题，但我定义了不透明的变量。在 Chrome 中它运行良好，但在边缘它没有。在我从声明中删除不透明度后，它在 Edge 中也可以正常工作。

score -1 · Accepted Answer

我尝试隔离问题，在 Edge 中似乎没有问题。正常的 CSS 可以正常工作。

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

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

变量对这些不起作用。

3 回答 3