Question

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

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

依此类推，并将其称为例如：

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

当我查看Edge中的页面时，所有颜色都缺失了，当我使用DOM资源管理器时，它会标记所有使用红色下划线的变量。 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 {
  background-color: var(--main-bg-color);
}

使用变量：

CREATE FUNCTION fnSpecNivAantal
(
    @Niveau as char(1)
)RETURNS TABLE AS RETURN

    SELECT Niveau = COUNT(*) 
    FROM STUK 
    WHERE niveaucode = @Niveau
        AND niveaucode IN ('A', 'B', 'C')

Answer 2

我遇到了同样的问题，但是我定义了不透明的变量。在Chrome中可以正常运行，但在边缘则不能。在从声明中删除不透明度之后，它在Edge中也可以正常工作。

Answer 3

我试图找出问题所在，并且Edge似乎没有问题。普通的CSS可以按预期工作。

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

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

变量不适用于泰文。

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

3 个答案: