2009-02-04 18 views
34

Ich habe einige Stil für h2 Tags (Farbe, Schriftgröße, etc.) festgelegt, aber wenn ich "A" Tag hinein, dann wird Stil als Link. Mein html:IE7 CSS-Vererbung funktioniert nicht

<h2> 
    <a class="no-decor" href="http://localhost/xxx/">Link</a> 
</h2> 

Also, wie Sie sehen können, habe ich "No-Dekor" -Klasse erstellt. Er sollte den Stil von h2 für ein "a" -Tag erben.

a.no-decor { 
    color:inherit; 
    font-family:inherit; 
    font-size:inherit; 
    font-weight:inherit; 
    text-decoration:inherit; 
} 

Auf Firefox everythig ist ok, aber IE zeigt immer noch Tag "eine" Art (unterstreichen Text-Dekoration und blaue Farbe). Ich weiß, ich kann einen Stil für "h2 a" festlegen, aber vielleicht ist es irgendwie möglich, Arbeit CSS erben Werte auf IE7 zwingen?

P.S. Auf IE6 wird nicht unterstützt.

P.P.S. Es gibt ein Beispiel auf die gleiche Weise: http://www.brunildo.org/test/inherit.html

Antwort

55

Nein, IE nie unterstützt inherit für jede Eigenschaft hat - Es tut uns leid. Dies wurde in> = IE8 behoben.

Während Sie ein JavaScript-Update verwenden, könnten die Eigenschaften von h2 zu a zu kopieren, ist es wahrscheinlich am einfachsten, die gleiche Styling Regel auf beiden Elemente nur anwenden:

h2, h2 a { 
    font: something; 
    color: black; 
    text-decoration: none; 
} 

Sie brauchen nicht inherit zu setzen auf Textdekoration sowieso, weil Dekoration nicht von einem Elternteil in ein Kind erbt: der Unterstreichungseffekt ist auf dem Elternteil und geht durch das Kind; das Kind kann es nicht entfernen (modulo IE Bugs). ‚Text-decoration: none‘ auf das Kind das Richtige ist, es sei denn, Sie wollen möglicherweise zwei unterstreicht ...

+0

Ja, ich habe diesen Weg gemacht. – Pawka

+14

Internet Explorer 7 und frühere Versionen unterstützen den Wert für andere Eigenschaften als Richtung und Sichtbarkeit nicht. –

+0

Das ist perfekt :) –

4

Ein Bug ist ein Bug und es gibt nichts, was Sie tun können, kurz vor Umgehungen.

Es gibt einen Test für die erben Unterstützung here.

Sie können auch versuchen, ein Skript wie ie7-js zu verwenden, die „eine JavaScript-Bibliothek ist Microsoft Internet Explorer wie ein Standard-Browser verhalten zu machen“

16

versuchen

a.no-decor{ 
    color:inherit; 
    //color:expression(this.parentNode.currentStyle['color']); 
    text-decoration:none; 
} 

Das wird Ihrer blaue Farbe und die unterstrichenen loszuwerden . Du könntest einen ähnlichen Ausdruck für die Unterstreichung verwenden, aber du wärst besser dran, wenn du nur text-decoration verwendest: none, da das alles eine vererbte Textdekoration ist, die dich irgendwie gibt und keine Notwendigkeit Ausdrücke zu verwenden, wenn nicht absolut notwendig Ich werde einen Leistungseinbruch bei der Verwendung von Ausdrücken machen.

+0

Zum ersten Mal sehe ich: Ausdruck. Eine elegantere Lösung als das Duplizieren von Markup oder das Verwenden einer JS-Bibliothek. – Stijn

+0

Ich liebe das. Es ist so ein Randfall für mich, dass ein Ausdruck hier perfekt ist. – lupos

1

Internet Explorer < = 7 Versionen unterstützen den Wert inherit für keine anderen Eigenschaften als direction und visibility.

+0

Wie in [dieser Kommentar] erwähnt (http: // stackoverflow.com/questions/511066/ie7-css-Vererbung-tut-nicht-Arbeit # comment1873681_511108) am 25. Dezember '09. – WynandB

Verwandte Themen