Edge 浏览器忽略 CSS 变量

Question

如您在此示例中所见：https://jsfiddle.net/50mqy8p1/1/ Microsoft Edge 在 display: none; 之后忽略 display: var(--display-var, block)，因此 div 不可见。其他浏览器显示此正确（IE11 基于 var-usage 之上的回退工作）。

我的代码有没有错误？或者你知道解决方法吗？ Google这里没帮到我。

<!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>

正如您在下面看到的，如果您只使用一个 class 和一个媒体查询

，也会发生这种情况

<!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，内容编辑器可以在其中选择某些内容何时可见或不可见。然后我们生成通用 visibility/invisibility classes 和一个通用的相应小 CSS 片段来处理可见性。但有时您不希望某个元素是 'block'，但例如 'flex'。有了这个 CSS-Vars 技巧，设计可以在元素变得可见时立即决定它想要的元素，而无需执行任何其他操作。

Answer 1

.make-invisible class 的 display: none; 属性似乎混淆了 Edge。

我认为将 .make-visible class 的 specificity 更新为 .foo.make-visible 之类的内容会使问题消失，但即便如此，Edge 上的问题仍然存在。

IMO 最简单的解决方案是从 div 元素中删除 .make-invisible class，因为我看不出为什么您需要同时拥有 .make-invisible 和 .make-visible class 同时出现在一个元素上。

更新

在考虑了您的更新后，我想出了一个不太难看的 hack。这不仅解决了 Edge 上的问题，而且不会影响 Chrome 或 FF.

上的行为

您需要做的是在一个 individual class 中定义 class 两次，每个属性如下：

    .foo {
      display: block;
    }
    .foo {
      display: var(--display-var, block);
    }

这是您的演示的工作版本：https://jsfiddle.net/sbr29yo6/

Answer 2

我看到你同时使用了多个 classes。

一般不需要同时使用多个class。

还取决于每个浏览器的工作方式不同，并且 Edge 可能会优先考虑此输出中的其他 class 结果。

你可以试试用JS把class换成另一个

如果使用多个 classes 有任何特定目的，那么您可以告诉我们。

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

Edge 浏览器忽略 CSS 变量

Edge browser ignores CSS variable

css

css-variables

microsoft-edge