2017-03-06 148 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以使其正常工作。

相关问题