正如您在此示例中所看到的：https://jsfiddle.net/50mqy8p1/1/ Microsoft Edge在display: var(--display-var, block)之后忽略display: none;，因此div不可见。其他浏览器显示这是正确的（IE11基于var-usage之上的回退工作）。
我的代码中有错误吗？或者你知道一个解决方法吗？谷歌在这里没有帮助我。
<!DOCTYPE html>
<html>
<head>
<title>Edge Demo</title>
<style>
html, body {
height: 100%;
}
.foo {
--display-var: flex;
background: #369;
height: 100%;
align-items: center;
justify-content: center;
}
.make-invisible { display: none; }
.make-visible {
display: block;
display: var(--display-var, block);
}
</style>
</head>
<body>
<div class="foo make-invisible make-visible">I am here!</div>
</body>
</html>正如您所看到的，如果您只使用一个类和媒体查询，也会发生这种情况
<!DOCTYPE html>
<html>
<head>
<title>Edge Demo</title>
<style>
.foo {
--display-var: flex;
display: none;
}
@media (min-width: 320px) {
.foo {
display: block;
display: var(--display-var, block);
}
}
</style>
</head>
<body>
<div class="foo">I am here!</div>
</body>
</html>我们的用例是什么，让我们解决这个问题：我们有一个CMS，内容编辑器可以选择什么时候应该可见或不可见。然后我们生成通用可见性/不可见性类和处理可见性的通用对应的小CSS片段。但有时你不希望元素是“阻塞”，而是例如'flex'。有了这个CSS-Vars技巧，设计可以在没有做任何其他事情的情况下立即变为可见时决定它想要的元素。
好像display: none;类的.make-invisible属性混淆了Edge。
我认为将specificity类的.make-visible更新为像.foo.make-visible这样的问题会让问题消失但是即使这样，问题仍然存在于Edge上。
最简单的解决方案IMO将从div元素中删除.make-invisible类，因为我没有看到为什么你需要同时在一个元素上同时使用.make-invisible和.make-visible类的原因。
更新
在考虑了你的更新之后，我能够想出一个不太难看的黑客。这不仅可以解决Edge上的问题，还不会影响Chrome或FF上的行为。
您需要做的是使用单个类中的每个属性两次定义类，如：
.foo {
display: block;
}
.foo {
display: var(--display-var, block);
}
这是您演示的工作版本：https://jsfiddle.net/sbr29yo6/
我可以看到你同时使用了各种类。
通常，不需要同时使用多个类。
还要求每个浏览器的工作方式不同，并且Edge可能会优先考虑此输出中的其他类结果。
您可以尝试使用JS将类替换为另一个。
如果有任何特定目的使用多个类，那么您可以告诉我们。
我们将尝试根据该要求提供进一步的建议。