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都不会使样式粘住。有谁知道我哪里出错了？

DJS。

Answer 1

我有三条建议：

使用reset CSS（其中有几个）;
Use a DOCTYPE declaration，如果你还没有，要强制IE进入符合标准的模式（好吧，因为符合IE的标准），而不是怪癖模式。我通常使用HTML 4.01过渡，但如果你遵守严格，甚至更好;
使用元素名称限定样式。

例如：

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

样式越具体，它在CSS中用于确定哪一个适用的重要性就越大。你可以通过!important测试它是否存在问题：

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

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

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

Answer 2

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

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

编辑：它看起来像是在scripts / REsultsList.js中。尝试更改说明的行：

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

为：

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

Answer 3

我刚刚转到“原始代码”链接，您的CSS上写着：

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

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

如何让IE6尊重类属性？

3 个答案: