下面我有 2 个 div 的 css 代码,请注意,第一个代码在页面上甚至没有 div 或任何带有其名称的内容。我还可以将其重命名为任何名称。
现在奇怪的部分出现了。下面的第二位代码的宽度为 520px,页面上的 div 为 520px 的唯一方法是如果我将 css 代码保留在第一个代码之上页面上没有现有的 div 必须位于页面上才能使第二个 css 代码正常工作,起初我认为这一定是浏览器缓存问题,所以我清除了缓存,但这没有任何作用,然后我尝试了其他 2 个浏览器它们都有相同的结果。
我将代码的第一位添加到页面中,第二位有效,我拿走第一位,第二位不起作用。我是不是忽略了这里的某些东西?
.commentwrappsdfsde2{width:950px;margin:0 0;padding:0;}
.commentwrapper{width:520px;margin-right:auto;margin-left:auto;}
这是整个页面的代码
<style>
<!-- css for user photos-->
div.imageSub img.female { border-top: 1px solid #FF3399; }
div.imageSub img.male { border-top: 1px solid #3399FF; }
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:12px;
font-weight: bold;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
<!-- end photo block-->
/* Comments */
.commentwrappsdfsde2{width:950px;margin:0 0;padding:0;}
.commentwrapper{width:520px;margin-right:auto;margin-left:auto;}
#comments ol.commentlist li { list-style-type:none; padding:20px; background:none; }
#comments ol.commentlist li.thread-even { background:#f6f6f6; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; }
#comments ul.children li ul.children,#comments .commentlist{padding:0;}
</style>
<div class="commentwrapper">
<div id="comments">
<ol class="commentlist">
<li class="comment thread-even " >
Comment 1
</li>
</ol>
</div>
</div>
最佳答案
我大胆猜测第一个之前的 CSS 格式错误,即语法错误,例如缺少右括号。在这种情况下,语句可能会被跳过,直到下一个有效的右括号为止。您的无意义语句“更正”了语法,因此如果没有它,.commentwrapper
语句将被跳过。
关于css - 我见过的最奇怪的CSS问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1293478/