问题
I am developing a web site and have optimized it for Firefox and Chrome. The project contains a style sheet called base.css
which is included in all the pages, and which contains some global settings and definitions, including a list of variables which I use to store color values like such:
:root {
--yellow-1: #fff8e3;
--yellow-2: #ffe9a9;
}
and so on, and calling them like for example:
.a-class {
background-color: var(--yellow-2);
}
When I look at the page in Edge, all the colors are missing, and when I use the DOM explorer, it marks all uses of the variables with red underlines. Does Edge not support CSS variables in this way? What can I do to work around this?
回答1:
MS Edge does support CSS variables from EdgeHTML v15:
https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/
This is also backed up here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility
The syntax is as follows:
Declaring a variable:
element {
--main-bg-color: brown;
}
Using the variable:
element {
background-color: var(--main-bg-color);
}
回答2:
I had the same problem, but I defined variables with opacity. In Chrome it worked fine, but in edge it didn't. After I removed opacity from declarations, it worked fine in Edge as well.
回答3:
I tried isolating the problem, and it seems there were no problem with this in Edge. Normal CSS works works as supposed to.
When selecting browser prefix elements like:
::-ms-track
::-ms-fill-lower
::-ms-fill-upper
::-ms-thumb
Variables does not work on theese.
来源:https://stackoverflow.com/questions/47635934/do-css-variables-work-differently-in-microsoft-edge