【问题标题】:The weirdest css issue I have ever seen我见过的最奇怪的css问题
【发布时间】:2010-05-27 08:16:55
【问题描述】:

下面我有 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>

【问题讨论】:

  • 可能是margin:0 0;在第一个 CSS 类中位?删除该属性后会发生什么?
  • 我无法在 FF 3.5 中重现此内容。
  • 您能发布您正在使用的 HTML 的其余部分吗?我无法使用基本页面复制此问题。
  • 照片 CSS 中的某些东西一定是造成它的原因

标签: css


【解决方案1】:

我敢猜测,在第一个 CSS 之前的 CSS 格式不正确,即语法错误,例如缺少右括号。在这种情况下,语句可能会被跳过,直到下一个有效的右括号。您的废话语句“更正”了语法,因此没有它,.commentwrapper 语句将被跳过。

【讨论】:

    猜你喜欢
    • 2015-08-06
    • 1970-01-01
    • 2011-01-03
    • 1970-01-01
    • 1970-01-01
    • 2011-06-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多