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;
    }
  }
}