CSS未被應用

-1

我在body標記上設置了一個類，名爲container，然後在我的CSS中，我嘗試了使用body.container和簡單.container.，但無論發生什麼，圖像都不會顯示爲正文背景。CSS未被應用

瀏覽器在他們的檢查員清楚地顯示它沒有被應用。奇怪的是，在Firefox中，它在規則的開頭旁邊顯示一個紅點，表示存在錯誤，您可以刪除此點，這會使規則正常工作並正確應用。

實際上，我寫預處理SASS這是Rails的預編譯和古怪再次，在那裏它在飛行中編譯，而不是在本地運行的預編譯的，它的工作原理...

這裏有一個短從原來的SCSS文件片段：

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的一個片段： #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生成的，爲了清晰起見，我可以將它分成多行，如果有幫助]。

來源

2015-06-16 BLewis

您是否故意不關閉body.container支架？ – Geoffrey

您的Sass無關緊要，只發布已編譯的CSS /標記。這裏需要有足夠的代碼來重現問題。 – cimmanon

@Geoffrey它在代碼中是正確的。 – BLewis

我已解決問題並找到問題的原因。

在Rails中由SASS預處理的兩個不同的.scss文件使用不同的字符編碼，這導致預編譯器插入UTF-8 BOM（由\ufeff描述的紅點）。通過將此文件的文件編碼更改爲ISO-8859-1（與其他文件相匹配），從而在我的CSS中刪除了一些特殊的引號（使用element::before和content:插入），我能夠解決該問題。

來源

2015-06-16 21:25:52 BLewis

回答

相關問題