未应用 CSS答案

【问题标题】：CSS not being applied未应用 CSS
【发布时间】：2015-09-01 21:05:04
【问题描述】：

我在body 标记上设置了一个类，称为container，然后在我的CSS 中，我尝试同时使用body.container 和.container.，但无论发生什么，它们的图像都没有显示为身体背景。

浏览器在他们的检查器中清楚地显示它没有被应用。奇怪的是，在 Firefox 中，它会在规则的开头旁边显示一个红点，这表明有问题，您可以删除这个点，这会使规则正常工作并正确应用。

我实际上正在编写由 Rails 预编译的预处理 SASS，而且奇怪的是，它在本地运行，它是动态编译的，而不是预编译的，它可以工作...

这是来自原始 SCSS 文件的简短 sn-p：

body.container {
  background: url('background.jpg');
  background-size: auto 110%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Tahoma";

  .personalization_box {
    position: absolute;
  }
...
}

这是输出 CSS 的 sn-p： #safari_rememberDiv{width:0px;height:0px;display:none}body.container{background:‌url("background.jpg");background-size:auto 110%;background-repeat:no-repeat;background-attachment:fixed;font-family:"Tahoma‌"}body.container .personalization_box{position:absolute;top:5%;width:80%;left:10%;height:90%;bord‌er-radius:15px;border:2px solid #5B5B5B;background-color:#FFF;overflow:hidden}

我在 CSS 验证时收到以下错误： #safari_rememberDiv Lexical error at line 1, column 1010. Encountered: "\ufeff" (65279), after : "" }body.container{background:url("background.jpg");background-size:auto 110%;background-repeat:no-repeat;background-attachment:fixed;font-family:"Tahoma"}

[全部在一行上，因为它是由 Rails 以这种方式生成的，如果有帮助，我可以将其拆分为多行]。

【问题讨论】：

你是不是故意不关闭 body.container 括号？
您的 Sass 无关紧要，仅发布编译后的 CSS/标记。这里需要有足够的代码来重现问题。
@Geoffrey 在代码中是正确的。
@cimmanon 这是 CSS 输出的 sn-p：safari_rememberDiv{width:0px;height:0px;display:none}body.container{background:url("background.jpg");background-size:auto 110%;background-repeat:no-repeat;background-attachment:fixed;font-family:"Tahoma"}body.container .personalization_box{position:absolute;top:5%;width:80%;left:10%;height:90%;border-radius:15px;border:2px solid #5B5B5B;background-color:#FFF;overflow:hidden}
你的 CSS 验证了吗？因为看起来你在那里注入了一些隐藏的字符。

标签： css ruby-on-rails sass

【解决方案1】：

我已经解决了问题并找到了问题的原因。

在 Rails 中由 SASS 预处理的两个不同的 .scss 文件采用不同的字符编码，这导致预编译器插入了一个 UTF-8 BOM，即\ufeff 描述的红点。通过将此文件的文件编码更改为 ISO-8859-1（与另一个文件匹配）并因此在我的 CSS 中稍后删除一些特殊引号（使用 element::before 和 content: 插入），我能够解决问题。

【讨论】：