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

我缺少什么？

Answer 1

所有课程都缺少收尾报价。

Validate your HTML以防止进一步的怪异。

编辑：（基于更正后的HTML）

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

1. 所有包含div1 和类h2的元素（如果浏览器正确，则选择零元素），或
2. 类h2的所有元素，其中祖先类div1的元素（如果浏览器行为，则选择您的<h2>）

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

Answer 2

1. 更正所有语法错误。 （类属性后缺少引号）
2. 没有H1任何地方

这有效

 .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; }

Answer 3

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

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

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

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

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

它没有解释为什么你首先使用这个选择器。鉴于您引用的HTML代码，我怀疑您实际上是否打算在这两个类中查找元素;您可能希望查找div2的元素，其中包含另一个元素h2。

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

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

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

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

Answer 4

任何人最终在这里都遇到了外部CSS工作表的问题，该工作表无法在Chrome / Firefox中运行，但在IE中会检查CSS和HTML文件的编码。我发现Chrome在UTF-8中需要CSS，而firefox在utf-8中也需要html文件。