2010-03-30 9 views
10

Ich habe folgenden CSS-CodeWie bekomme ich IE8, um ein CSS zu akzeptieren: vor dem Tag?

.editable:before { 
    content: url(../images/icons/icon1.png); 
    padding-right:5px; 
} 

dies in Verbindung mit dem folgenden Markup verwendet wird:

<span class="editable"></span> 

In jedem anderen gesegneten Browser der Welt meines Symbol erscheinen, aber IE8 zu haben scheint ein Problem damit. Ist das :before Pseudo-Element CSS2 nicht? ist nicht content: auch ein CSS2-Befehl? was gibt?

+0

Ich weiß nicht über IE8, aber: vor und: nach werden nicht in IE7 und darunter unterstützt. Ich weiß nicht, ob sie endlich Unterstützung in 8 hinzugefügt haben oder nicht. Wenn sie sicherstellen, dass die Seite in der IE7-Emulation nicht gerendert wird. – prodigitalson

Antwort

23

Update: Ich habe die Seite falsch gelesen! IE 8 tut Unterstützung: vor mit Bildern, es ist einfach nicht, wenn es im IE7-Kompatibilitätsmodus ist.

IE8 unterstützt :before, aber nicht und auch Bilder als Inhalt, wenn sie nicht im Kompatibilitätsmodus. Kudos an @toscho zum Testen!

Wie liebe ich quirksmode.org, die mit diesem Material mindestens halbwegs erträglich macht den Umgang. Der Typ verdient eine Medaille!

+0

Ah, und wenn ich mich richtig erinnere, kann man auch keinen HTML-Code einfügen, also ist die Verwendung von out ... – NibblyPig

+0

@SLC: Es wird als Text gerendert, ja. – ANeves

6

Sie können das Bild als Hintergrund für den erzeugten Inhalt verwenden:

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>Generated content with an image</title> 
<style> 
p:before 
    { 
     content: ''; 
     padding: 20px; 
     background: url("css.png") center center no-repeat; 
    } 
</style> 
<p>Test</p> 

Arbeiten in IE 8, Opera und Mozilla. Live-Demo.

+0

Sie haben Recht! IE8 als IE8 unterstützt Bilder als Inhalt. Prost, aktualisierte meine Antwort. +1. –

24

Eigentlich sollten Sie hier vorsichtig sein und das Detail lesen. Ausführliche Informationen finden Sie this link - die

In Windows Internet Explorer 8 sowie späteren Versionen von Windows Internet Explorer in IE8-Standards-Modus heißt, nur die Ein-Kolon Form dieses Pseudo-Element erkannt wird Das heißt: vorher. Beginnend mit Windows Internet Explorer 9 benötigt das :: before-Pseudo-Element zwei Doppelpunkte, obwohl die Ein-Doppelpunkt-Form immer noch erkannt wird und sich identisch mit der Doppelpunkt-Form verhält.

Bedeutung für Browser <IE9 - Sie :before und für >=IE9 verwenden müssen - müssen Sie ::before

+1

sah dies mir eine Menge Zeit gerettet, IE8 war nicht für mich arbeiten, weil ich hatte: –

+0

Doppelpunkt war mein Problem, danke für die Köpfe hoch. Wie macht man das vorwärts kompatibel? I.e. Verwenden Sie einen einzelnen Doppelpunkt, wenn es weniger als IEX vs Doppelpunkt ist, wenn es größer als IEY ist? – Jacques

+3

@ Jacques der einzelne Doppelpunkt funktioniert genauso gut in IE> = 9. Also bleiben Sie jetzt einfach bei dem einzelnen Doppelpunkt (was der CSS2.1-Standard ist). Nur CSS3 unterscheidet zwischen einzelnen und doppelten Doppelpunkten für Pseudo-Selektoren und Pseudo-Elemente. –

10

verwenden Bei Verwendung: vor und: nach, nur vorsichtig sein, nicht zwei Doppelpunkte zu verwenden (:: nach - nicht Arbeit, aber: nach wird funktionieren). Ich verlor ca. 20 Minuten für diese ...

+0

Danke, das ist eigentlich die Antwort, nach der ich persönlich gesucht habe. IE8 arbeitet jetzt für mich. (Stupid IE8!) – philtune

+0

Sie Herr, rettete mich von einer möglicherweise eintägigen Debug-Sitzung, warum dies & $ (* # würde nicht funktionieren, während jede Kompatibilitätstabelle sagt, dass es sollte. –

+0

aber besser zu verwenden :: vor für moderne Browser nicht sicher, wenn Sie verdoppeln können wie schließen: vorher, schließen :: vor {etc ... – landed

0

Dies ist von Pekka der beeindruckende Beispiel ... Meine Höhen auf meinem Projekt war zu groß für die Zeile ... Also habe ich eine Füllung-Boden: 0px;

Nur für den Fall, dass Sie in das Regen ....

.icon-spinner:before { 
    content: ''; 
    padding: 15px; 
    padding-bottom: 0px; 
    background: url("css.png") no-repeat left top; 
} 
Verwandte Themen