IE: ID- und Klassenselektor in einem Simple Selector

[Cheatah]

Hi,

man nehme:

#foo.bar { color: blue; }
#foo.qaz { color: red; }

Jeder anständige Browser wird einem <element id="foo" class="qaz"> die Textfarbe Rot geben - der IE (zumindest in Version 6) nicht. Tauscht man die Reihenfolge der Regeln, gibt es zwar roten Text, aber keinen blauen mehr. Es wird immer nur die erste Regel angewendet, keine der folgenden; wobei "andersartige" Regeln im späteren Verlauf des CSS-Codes anstandsfrei akzeptiert werden. Die Ursache scheint in der nicht-hierarchischen Verknüpfung von ID- und Klassenselektor zu liegen.

Ich bin schon öfter auf diesen Fehler gestoßen und konnte ihn bisher immer umgehen (z.B. durch "#baz .qaz"), was alledings eher zufällig durch die Struktur möglich war. Nun habe ich dummerweise den Fall, dass eine Reihe Klassen vorliegen, die mit verschiedenen Breiten versehen sind, die im Element #foo jeweils anders sein müssen - ich kann den Selektor also nicht ändern.

"Normalerweise" kann man den IE immer mit irgend welchen Spinnereien austricksen, etwa durch eine zusätzliche Regel zwischen den anderen, die nichts macht außer da zu sein und hübsch auszusehen. Hier gelingt mir das leider nicht. Ich finde im Netz auch keine Hinweise auf diesen Bug bzw. darauf, wie er zu beheben ist. Weiß jemand mehr?

Cheatah

[MudGuard]

Hi,

#foo.bar { color: blue; }
#foo.qaz { color: red; }
Ich bin schon öfter auf diesen Fehler gestoßen

Ist vermutlich dasselbe Problem wie bei mehreren Klassen im selben Element - da ist der IE einfach überfordert.

.foo { color:green; }
.foo.bar { color:red; }
.bar { color:blue; }
bringt im IE ja auch seltsame Resultate ...

Ich finde im Netz auch keine Hinweise auf diesen Bug bzw. darauf, wie er zu beheben ist.

So wie die meisten der IE-Bugs - ersetze den IE durch einen Browser ;-)

Sorry, eine andere Problemlösung kenn ich auch nicht ...

cu,
Andreas

[Cheatah]

Hi,

Ist vermutlich dasselbe Problem wie bei mehreren Klassen im selben Element - da ist der IE einfach überfordert.

nö, bei der Klassengeschichte verhält er sich ja "irgendwie" CSS/1.0-konform - dort ist nämlich nur eine Klasse erlaubt[1]. Und CSS/1.0 ist ziemlich genau das Niveau, auf dem der IE agiert ;-)

So wie die meisten der IE-Bugs - ersetze den IE durch einen Browser ;-)

<p id="noie">Laden Sie sich endlich mal Firefox runter.</p>

#noie { display: none; }
* html #noie { position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF; }

;-)

Cheatah

[1] Ein Entwickler hat mal im MS-Blog beschrieben, wie der IE dabei vorgeht. Ist schon ein paar Monate her, deswegen versuche ich erst gar nicht, den Link zu finden *g*

[Axel Richter]

Hallo,

man nehme:

#foo.bar { color: blue; }
#foo.qaz { color: red; }

Jeder anständige Browser wird einem <element id="foo" class="qaz"> die Textfarbe Rot geben - der IE (zumindest in Version 6) nicht.

Ja. http://www.quirksmode.org/index.html?/bugreports/archives/2006/04/CSS_Bug_in_MSIE_6_Selector_with_an_ID_and_a_Class_.html

Die "Lösung" steht mit dabei ;-).

viele Grüße

Axel

[Cheatah]

Hi,

Ja. http://www.quirksmode.org/index.html?/bugreports/archives/2006/04/CSS_Bug_in_MSIE_6_Selector_with_an_ID_and_a_Class_.html

jupp, das ist es, danke. Wenn ich es richtig sehe, geht es um die Aufteilung der Regeln auf verschiedene Stylesheets - dann werde ich wohl mal mit @import experimentieren.

Cheatah