2017-03-06 165 views
0

我不是一個Web開發人員,但可以閱讀一個CSS文件並實施它。我有一些CSS,下面的工作是正確的,除了.topbox,只要我嘗試在div中使用它,它只是顯示爲普通文本而不是CSS樣式,我試着重新加載瀏覽器緩存,我甚至試圖複製和粘貼一些工作和改變名稱的CSS,但即使這不起作用。所以這讓我相信我的CSS中有一個錯誤導致了這個問題。CSS不工作,因爲它應該

.redbox { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    margin: 10px; 
    padding: 10px; 
    overflow: hidden; 
    border: 2px solid rgba(170,75,75,0.7); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
    color: rgba(61,60,60,0.85); 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    background: rgba(168,10,10,0.45); 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
} 
.topbox { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    float: right; 
    padding: 5px; 
    border: 2px solid rgba(152,0,0,0.7); 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
    color: black; 
    text-align: center; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    background: rgba(224,102,102,0.7); 
} 

試圖像這樣實現它;

<div class="topbox"> 
    Test<i class="fa fa-trash"></i> 
</div> 

這不起作用,它只是顯示爲普通文本。然而..

<div class="redbox"> 
    Test<i class="fa fa-trash"></i> 
</div> 

顯示出來就好..任何想法?

編輯:試圖使這更清楚是怎麼回事..

這是使用類=「紅盒子」從上面的代碼中會發生什麼..

Exactly what I expect..

然而,當我複製並粘貼完全相同的.redbox CSS來.topbox和我期望相同的結果..這是我所得到的..

I have class="topbox" but I changed the .topbox CSS code to match .redbox, so why is it not showing up the way the above does?

這裏是更新的CSS

.redbox { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    margin: 10px; 
    padding: 10px; 
    overflow: hidden; 
    border: 2px solid rgba(170,75,75,0.7); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
    color: rgba(61,60,60,0.85); 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    background: rgba(168,10,10,0.45); 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
} 

.topbox { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    margin: 10px; 
    padding: 10px; 
    overflow: hidden; 
    border: 2px solid rgba(165,161,74,0.65); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
    color: rgba(61,60,60,0.85); 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    background: rgba(153,148,7,0.35); 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
} 

但.redbox顯示爲預期,.topbox只是顯示沒有和CSS格式..

+0

你的意思是「顯示爲普通文本而不是CSS樣式」?你能用[mcve]顯示問題來使用Stack Snippets嗎?請包括你期望發生的事情,然後會發生什麼。 –

+0

我編輯了我的上述問題以更好地展示發生了什麼。使用該片段將是困難的,因爲這是大型燒瓶項目的一部分。 –

+0

看來這是一個問題,CSS沒有得到更新重新加載。我清除緩存,並在鉻中的一切,它仍然無法正常工作。我不得不下載一個擴展來重新加載CSS。不知道發生了什麼事情。這讓我瘋狂! –

回答

0

.greenbox { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    border: 2px solid rgba(76,173,76,0.7); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: rgba(63,63,63,0.85); 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(10,170,10,0.45); 
 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
 
} 
 
.redbox { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    border: 2px solid rgba(170,75,75,0.7); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: rgba(61,60,60,0.85); 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(168,10,10,0.45); 
 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
 
} 
 
.bluebox { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    border: 2px solid rgba(75,120,168,0.65); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: rgba(61,60,60,0.85); 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(7,87,153,0.35); 
 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
 
} 
 
.yellowbox { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    border: 2px solid rgba(165,161,74,0.65); 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: rgba(61,60,60,0.85); 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(153,148,7,0.35); 
 
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
 
} 
 
.footer { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    margin: 15px 0px 5px 0px; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
    border: none; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: #666666; 
 
    text-align: center; 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: #fafafa; 
 
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 0 0 0 0 rgba(0,0,0,0.3) ; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ; 
 
} 
 
.topbox { 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    float: right; 
 
    padding: 5px; 
 
    border: 2px solid rgba(152,0,0,0.7); 
 
    -webkit-border-radius: 1px; 
 
    border-radius: 1px; 
 
    font: normal 14px/1 Verdana, Geneva, sans-serif; 
 
    color: black; 
 
    text-align: center; 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(224,102,102,0.7); 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="topbox"> 
 
    Test<i class="fa fa-trash"></i> 
 
</div> 
 

 
<div class="greenbox"> 
 
    Test<i class="fa fa-trash"></i> 
 
</div>

+0

我很抱歉,它在它自己的文檔中,除了.topbox以外,所有的CSS都可以正常工作。我不確定是什麼導致.topbox被忽略。 –

0

看來,這是一個問題由於某些原因,Chrome瀏覽器沒有重新加載CSS,因此我清除了緩存並嘗試了crtl + f5等。我不得不下載擴展程序..爲Chrome重新加載CSS以使其正常工作。