CSS - 背景颜色在 IE11 中不起作用

Question

我有以下代码：

.skills_column {
  padding: 50px !important;
  padding-top: 60px !important;

  &.--light {
    background-color: white;
  }
  &.--dark {
    background-color: #ced4db;
  }

  @include media-breakpoint-down(sm) {
    h1 {
      text-align: center;
    }
  }
}

共有 3 列，浅色一列和深色两列。 所有这些都适用于 Chrome 和 Firefox，但是，它不适用于 IE11:

虽然浅色的一列如预期的那样是白色的，但在 IE11 中查看时应该是深色的另外两列也是白色的。

可能是什么问题？ 我也尝试添加 filter: none !important; 因为我在某处读到过，但这似乎没有什么区别，虽然我可能没有正确应用它，但我不确定。

我也在使用 flexbox，如果这会有所作为的话。但我的问题是没有应用背景颜色。

Answer 1

您能否尝试从 class 名称（--dark、--light）中删除双连字符。我有一种感觉 IE 不喜欢 BEM 表示。也许单下划线或双下划线有效。

.skills_column {
  padding: 50px !important;
  padding-top: 60px !important;

  &._light {
    background-color: white;
  }
  &._dark {
    background-color: #ced4db;
  }

  @include media-breakpoint-down(sm) {
    h1 {
      text-align: center;
    }
  }
}