html - CSS 规则在 IE 中有效，但在 Chrome/Firefox 中无效

Question

我的 HTML 中的错字已更正。这个问题仍然有效。

我有这个 HTML 结构：

<div id="div1" class="div1">
     <div id="div2" class="div2">
          <h2 class="h2"> Hello </h2>
     </div>
</div>

还有一个 CSS 说：

.div1.h2 {
    font-size: 1.6em;
    font-weight: bold;
    color: #808080;
    margin: 0 0 1em 0;
}

对于 IE，CSS 应用于h2，但不适用于 Chrome 和 Firefox

有什么我想念的吗？

score 2 · Accepted Answer

您所有的课程都缺少结束引号。

验证您的 HTML以防止进一步的怪异。

编辑：（基于更正的 HTML）

由于浏览器解释不一致，.div1.h2可能意味着：

我认为 IE 正在处理.div1.h2后一种情况。在选择器中添加一个空格：.div1 .h2.

score 1 · Accepted Answer

这有效

 .div1.h2 {
     font-size: 1.6em;
     font-weight: bold;
     color: #808080;
     margin: 0 0 1em 0; }

或这个

 h2, .h2 {
     font-size: 1.6em;
     font-weight: bold;
     color: #808080;
     margin: 0 0 1em 0; }

score 1 · Accepted Answer

如果您运行的是非常旧版本的 IE（我认为是 IE6），那么这里可能存在一个 IE 错误。

有问题的错误是，当您有一个 CSS 选择器将多个类应用于同一元素时，IE6 将只能看到这些类名中的最后一个。

所以.div1.h2被 IE6 视为只是.h2，而其他浏览器会看到.div.h2。

该元素只有一个类名，即h2，因此 IE6 将在元素上匹配它，但其他浏览器不会，因为它们正在寻找class="div2 h2"- 即同一元素上的两个类名。

这解释了为什么您可能会看到浏览器之间的差异。

它没有解释为什么你首先使用这个选择器。鉴于您引用的 HTML 代码，我怀疑您是否真的打算寻找具有这两个类的元素；你可能想寻找一个里面div2有另一个元素的元素。h2

如果那是您想要的，那么您的选择器不正确。为此，您需要在两个类之间添加一个空格。

.div2 .h2 { .... }
     ^
  note the space here

或者，您可以使用>符号代替空格，这是一种更精确的替代方法，适合您的 HTML 代码。不幸的是，如果您使用的是 IE6，则无法使用>，因为它不受支持。

当然，如果您仍然坚持使用 IE6，那么将会有一大堆其他东西被破坏。我的建议是像其他人一样升级您的浏览器。

score 0 · Accepted Answer

任何人最终在这里使用外部 css 表在 Chrome/Firefox 中不起作用，但在 IE 中检查 css 和 html 文件的编码。我发现 Chrome 需要 UTF-8 中的 css，但 firefox 也需要 utf-8 中的 html 文件。

4 回答 4