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

您可以尝试从类名称中删除双连字符(--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;
    }
  }
}