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

【问题标题】：CSS - background-color not working in IE11CSS - 背景颜色在 IE11 中不起作用
【发布时间】：2017-07-05 18:59:49
【问题描述】：

我有以下代码：

.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，如果这应该有所作为的话。但我的问题是没有应用背景颜色。

【问题讨论】：

它主要是影响这一点的弹性框。弹性项目上是否有 flex 或 min-height 属性？
我只有一个附加类，它应用于每一列的一个子列，它以 svg 为中心。但这并不直接应用于列本身：.content_centered { display: flex; align-items: center; justify-content: center; } - 除此之外，我每列的 HTML 如下所示：<div class="col-xs-12 col-lg-4 skills_column --dark"> ... </div>
嗯，看起来没什么害处。你能从类名中删除双连字符--dark 并尝试。我感觉 IE 不喜欢这样。
我会试试这个。这可能是它。很快就会回来报告
当然，很高兴它有帮助。每天我都看到这样的问题，我为 IE 开发者和用户感到难过。

标签： html css sass cross-browser internet-explorer-11

【解决方案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;
    }
  }
}

【讨论】：