24

IE6にダブルクラスを理解させる方法はありますか?たとえば、カラークラスとおそらくクリックされたクラスを持つクラスMenuButtonがあるとします。お気に入り ：

.LeftContent a.MenuButton {..general rules..}  
.LeftContent a.MenuButton.Orange {..sets background-image..}  
.LeftContent a.MenuButton.Clicked {...hum ta dum...}

現在、IE6 は を理解<a class="MenuButton Orange">していますが、 のように Clicked を追加すると<a class="MenuButton Orange Clicked">、IE は Clicked ルールを無視します。

もちろん、CSS を書き直して、.MenuButtonOrange
などに独自のルールを設定することもできます (そして、この質問をするよりもはるかに短い時間で済みます ;-)
が、それはとても魅力的でなく、Web 0.9 です...

乾杯！

4

3 に答える 3

39

IE6 は、複数のクラス セレクターをサポートしていません。Orangeクラスに変更が見られる理由は、a.MenuButton.Orangeが IE6 によって として解釈されるためですa.Orange。

これを回避できるようにマークアップを構成することをお勧めします。

<div class="leftcontent">
   <ul class="navmenu">
     <li><a class="menubutton orange" href="#">One</a></li>
     <li><a class="menubutton orange clicked" href="#">Two</a></li>
   </ul>
</div>

より具体的な祖先でグループ化することにより、その祖先によってスコープが設定されたクラスでバリエーションを作成できます (この例ではnavmenu)。

.leftcontent .navmenu a { /* ... basic styles ... */ }
.leftcontent .navmenu a.orange { /* ... extra orange ... */ }
.leftcontent .navmenu a.clicked { /* ... bold text ... */ }

複数のクラスほど良くはありませんが、IE のサポート不足を回避するために使用しました。

于 2008-11-23T02:36:12.877 に答える
7

（質問に書いたように）.LeftContent a.MenuButton.Orangeのようなタグ固有のルールを使用すると、機能します...

セレクターのクラスが要素のクラスと同じ順序である場合にのみ、それらに一致します。

これは正しくありません。IE6 (および互換モードの IE7) は、セレクター パーツごとに 1 つのクラスのみを記憶します。2 つ書くと、2 つ目が最初のものを上書きします。したがって、'a.MenuButton.Orange' は実質的に 'a.Orange' と同じです。

そのため、今のところ複数のクラス セレクターを避ける必要があります。

于 2008-11-23T13:05:25.833 に答える