Question

如本例所示，https://jsfiddle.net/50mqy8p1/1/ Microsoft Edge在var filter = new Windows.Web.Http.Filters.HttpBaseProtocolFilter() { CookieUsageBehavior = Windows.Web.Http.Filters.HttpCookieUsageBehavior.Default }; filter.CookieManager.SetCookie(new Windows.Web.Http.HttpCookie("name", "domain", "path") { Value = "value" }); var client = new Windows.Web.Http.HttpClient(filter); var response = await client.GetAsync(targetUri);之后忽略var cookie = filter.CookieManager.GetCookies(targetUri). FirstOrDefault(cookie => cookie.Name == "name");，因此div不可见。其他浏览器会显示此正确的信息（IE11基于var-usage上方的后备功能工作。）

我的代码中是否有任何错误？还是您知道解决方法？ Google在这里没有帮助我。

display: var(--display-var, block)

如您在下面看到的，如果仅使用一个类和一个媒体查询，也会发生这种情况

display: none;

什么是用例，可以让我们运行此问题：我们有一个CMS，内容编辑器可以在其中选择可见或不可见的内容。然后，我们生成通用的可见性/不可见性类以及相应的通用CSS小片段来处理可见性。但是有时您不希望某个元素成为“块”，而是例如“ flex”。借助此CSS-Vars技巧，设计人员可以在不可见的情况下决定元素在可见后立即要显示的内容。

Answer 1

似乎display: none;类的.make-invisible属性使Edge感到困惑。

我认为将.make-visible类的specificity更新为类似.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/

Answer 2

我可以看到您同时使用了各种类。

通常，不需要同时使用多个类。

还取决于每个浏览器的工作方式是否不同，Edge可能会在此输出中将其他类结果赋予优先级。

您可以尝试使用JS将类替换为另一个。

如果有使用多个类的特定目的，则可以让我们知道。

我们将根据该要求尝试提供进一步的建议。

边缘浏览器忽略CSS变量

2 个答案: