2017-03-06 2 views
0

저는 웹 개발자가 아니지만 CSS 파일을 읽고이를 구현할 수 있습니다. CSS 스타일이 아닌 일반 텍스트로 표시 할 때마다 .topbox를 제외하고 올바르게 작동하는 일부 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..

입니다 나는 .. 복사 .topbox하는 동일한 .redbox의 CSS를 붙여 나는 이것이 내가 무엇을 얻을 .. 같은 결과를 기대

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) ; 
} 

이다 그러나 예상과 .topbox 그냥없이 CSS 서식 표시로 표시 .redbox ..

+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

이 문제였다 보인다 크롬이 어떤 이유로 든 CSS를 다시로드하지 않아도 캐시를 지우고 crtl + f5 등을 시도했습니다. 확장 기능을 다운로드해야만했습니다. Chrome에 'reload CSS'가 있어야 작동합니다.

관련 문제