HR的CSS背景图像样式禁用其他规则[关闭]答案

【问题标题】：CSS Background-Image styling for HR disables other rules [closed]HR的CSS背景图像样式禁用其他规则[关闭]
【发布时间】：2015-02-22 16:17:55
【问题描述】：

我遇到了一个奇怪的 CSS 错误：

当我使用background-image 设置hr 的样式时，放置在此规则之后的任何规则或选择器都不会显示在我的页面上：

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0);
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

Firefox 开发工具仅显示我有 1 条活动规则，即使工作表中在此之后有许多规则。我只是把它移到最后，一切正常。

是否有我不明白的原因？我觉得我错过了导致这种情况的简单原因。

【问题讨论】：

这通常发生在解析器遇到无法解析的规则时；例如，像一个错字。检查您是否正在关闭大括号和分号；
倒数第二个-ms-linear-gradient、background-image规则中缺少)。
Grrrr，我看了又看。我觉得自己像个白痴！谢谢！

标签： css firefox

【解决方案1】：

在这一行：

background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0);

最后你缺少：)。

【讨论】：

我不敢相信我错过了这个：/
事实上，这行应该完全删除——-ms-linear-gradient 不被任何功能版本的 IE 使用。

【解决方案2】：

试试这个：

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

您错过了 -ms-linear-gradient 行中的右括号。

【讨论】：