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

您所有的課程都缺少右引號。

驗證您的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將僅看到這些類名的最后一個。

所以.div1.h2由IE6視為只是.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文件。