如何让 IE6 尊重 class 属性？

Question

老读者，第一次发帖问：

经过数周的谷歌和论坛拖网搜索，我仍然不知所措。我有一系列嵌套的 div，有些带有 id，有些带有类，有些带有 id 和类。

它是 XHTML 严格的，并且可以验证。 原码http://www.drewsonne.com/melonstack/?topic=brisbane

例如。

<div id="main">
  <div class="rEntry" id="r1">
    <a href="http://www.brisbane.com">City of Brisbane</a><br>
    <span id="rSum1" class="rSum">This is a website summary</span>
  </div>
  <div class="rEntry" id="r2">
    <a href="http://www.brisbane.gov.au">City of Brisbane</a><br>
    <span id="rSum2" class="rSum">This is a website summary as well</span>
  </div>
    ... et cetera ...
</div>

出于测试目的，我的 CSS 目前看起来像这样

.rEntry{
    padding:10px;
    margin:10px;
}

对于我的生活，我无法让这种风格在 IE6 中工作。如果我更改为#r1、#r2 或 div，则样式将应用于适当的元素，但 div.rEntry 和 .rEntry 都不会使样式保持不变。有谁知道我哪里出错了？

DJ。

Answer 1

我有三点建议：

1. 使用reset CSS（周围有好几个）；
2. Use a DOCTYPE declaration，如果您还没有，请强制 IE 进入标准兼容模式（以及，与 IE 一样符合标准）而不是 quirks 模式。我通常为此使用 HTML 4.01 过渡，但如果您遵守严格，那就更好了；
3. 使用元素名称限定您的样式。

例如：

div.rEntry {
    padding:10px;
    margin:10px;
}

样式越具体，它在 CSS 中决定应用哪一个的重要性就越大。您可以通过!important 进行测试来查看是否是问题所在：

div.rEntry{
    padding:10px !important;
    margin:10px !important;
}

如果这样可以解决问题，那么您就有其他 CSS 优先。我怀疑这是问题所在，因为 #id 选择器的优先级高于 .class 选择器，这就是您所看到的行为。

注意：我不建议将!important 用作一般规则，只是为了查找CSS 优先级的问题。一旦确定，通常最好以“正确”的方式修复它们。

Answer 2

我刚刚转到“原始代码”链接，您的 CSS 显示为：

div.rEntry{
    margin:10px !important;
}   padding:10px !important;

看起来您的填充样式在括号之外。你确定这不仅仅是因为一个错字吗？

Answer 3

现在，查看您提供的链接中的 HTML，我没有看到任何带有 rEntry 类的 div。然后我意识到，它们是动态生成的。这提醒了我对于 IE6，当通过 DOM 添加 CSS 类时，你必须使用 className 属性，而不是 class。换句话说，IE6 DOM 根本看不到 div 属于 rEntry 类。

这些 div 是如何生成的？如果是通过您自己的代码，您可能想尝试修改元素的 class 和 className 属性。

edit：它看起来像是在 scripts/REsultsList.js 中。尝试更改以下内容：

entry_div_element.setAttribute('class', 'rEntry');

到：

entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';