Pseudoelemente after und before - content im IE8

Hi Leute,

ich habe folgenden Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
	<title>Testbutton</title>
		<style type="text/css">  
			body
				{
				margin:0px;
				padding:0px;
				}
			#dummy
				{
				position:absolute;
				width:100%;
				height:100%;
				}
			.button
				{
				margin: 30px;
				position:relative;
				border:1px black solid;
				height:30px;
				float:left;
				cursor:pointer;
				}
			.button:before
				{
				content:"Test.";  
				}
			.button:after
				{
				content:".Test";  
				}
		</style>
	</head>
	<body>
		<div id="dummy">  
			<div class="button">  
				1
			</div>
			<div class="button">  
				2
			</div>
			<div class="button">  
				3
			</div>
		</div>
	</body>
</html>

Dieser wird mir korrekt Angezeigt wenn die HTM Datei lokal auf der Festplatte liegt.
Schiebe ich die Datei allerdings auf einen Webserver oder eine Serverfreigabe ignoriert der IE8 scheinbar die before und after Formatierungen bzw. das content Atribut. Kann sich jemand dieses verhalten erklären?

Grüße kami

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 141495

Url: https://administrator.de/forum/pseudoelemente-after-und-before-content-im-ie8-141495.html

Ausgedruckt am: 23.12.2024 um 01:12 Uhr

9 Kommentare

Neuester Kommentar

Hallo,

erklären kann ich es nicht. Aber bestätigen.
Und erwähnen das der Firefox und der Opera es beide korrekt darstellen.

vermutlich ein Bug

grüße

IE7 unterstützt weder :before noch :after. Der IE8 in Version b1 akzeptiert als content keine Bilder.
Siehe hier:
http://www.quirksmode.org/css/beforeafter.html

Möglicher Workaround am Ende der Seite (Englisch):
http://www.howtocreate.co.uk/wrongWithIE/?chapter=%3Abefore+and+%3Aafte ...

Gruß
Snow

Zitat von @Snowman25:

IE7 unterstützt weder :before noch :after. Der IE8 in Version b1 akzeptiert als content keine Bilder.
Siehe hier:
http://www.quirksmode.org/css/beforeafter.html

Naja der IE8 stellt ja die Before und After Elemente richtig dar... aber eben seltsamerweise nur wenn die Datei nicht auf einem Netzlaufwerk sondern lokal gespeichert ist...
Deswegen vermute ich mal der Workaround wird nicht helfen. Aber probieren schadet ja nicht

grüße

Ist nur kurios das er lokal sogar Bilder richtig darstellt. Ich hatte vor ein Button zu kreieren welcher eine Variabele länge hat. Anfang und Ende sollte allerdings abgerundet sein. So habe ich drei Bilder button_left, button_center und button_right.
Lokal funktioniert sogar das hovern richtig... (alle drei bilder werden verändert)
Naja zur Not bleibt ja noch javascript mit drei divs die ich alle via mouseover veränder... ist aber sehr unschön...

Vieleicht hat ja noch jemand nen Tipp warum der IE lokale Dokumente anders behandelt als welche im Netz...

Zitat von @kami-kaTze:

Ist nur kurios das er lokal sogar Bilder richtig darstellt. Ich hatte vor ein Button zu kreieren welcher eine Variabele länge
hat. Anfang und Ende sollte allerdings abgerundet sein. So habe ich drei Bilder button_left, button_center und button_right.
Lokal funktioniert sogar das hovern richtig... (alle drei bilder werden verändert)
Naja zur Not bleibt ja noch javascript mit drei divs die ich alle via mouseover veränder... ist aber sehr unschön...

Kannst du nicht 1 Bild mit 'ner imagemap benutzen?
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Vieleicht hat ja noch jemand nen Tipp warum der IE lokale Dokumente anders behandelt als welche im Netz...

Dir ist das Zwiebel- bzw. Zonenmodell bekannt?
Anscheinend haben die IE-Entwickler sich gedacht, sie bauen :before und :after ein. Haben aber die Sicherheitsprobleme für externe Zugriffe nicht unter Kontrolle bekommen und jetzt gehts bloß im Internen/lokalen bereich.

Gruß
Snow

ja ist mir bekannt. Allerdings ist die Netzwerkfreigabe auch als Trusted Zone eingerichtet..

Aber meine erste Vermutung ging auch in diese Richtung... Welcher Trottel bei Microsoft kam denn auf die Idee CSS in ne Sicherheitszone einzubauen x.X..

Naja sei's drumm.

Zu deinem Vorschlag mit der Imagemap: Leider funktionier dies nicht da ich auch nur ein Bild benutzen kann.
Imagemap = 1 Bild - n Ziele. Ich benötge aber n Bilder - 1 Ziel. Zusätzlich sollen sich alle Bilder bei einem Hover über eines der Bilder verändern. Dies funktioniert wunderbar mit dem before und after Elemente. Nur leider nicht im IE...

Grund:
Ich möchte eine variabel langen Button haben welcher sich automatisch dem Text anpasst z.B. [###] oder [######]
Wenn man ein einzelnes Bild benutzt kommt es leider zu Verzerrungen des Bildes am Anfang und am Ende: [###] wird zu <######>.
Aus diesem Grund möchte ich das Bild in drei Teile teilen: Angang [, Mitte # und Ende ].
Die Mitte kann ich als automatisch wiederholenden Background in in einer Klasse hinterlegen. # wird zu ######
Nun habe ich die Elemente after und before genutzt um das Anfangs- und das Endbild einzubinden. [###] bzw. [######]
Alles super. Naja mit bleibt nur wohl nur übrig drei DIVs zu erstellen und mit javascript onMouseOver und onMouseOut zu arbeiten um den gleichen Effekt zu erzielen.

Es sei denn natürlich das noch jemand einen Trick weiss :D

Grüße kami

Zitat von @kami-kaTze:

Es sei denn natürlich das noch jemand einen Trick weiss :D

Ich fürchte, da siehts schlecht aus..
Übrigens gefällt mir deine Einstellung, nur im allerletzten Fall JS zu verwenden. Sehr löblich

Grüße kami

Grüße
Snow

Man weiss ja nie wie der Browser am anderen Ende ausschaut (JS könnte ja aus sein). Desweiteren sind es im JS knapp 15 Zeilen Code (vieleicht 10 wenns optimiert ist) im CSS sinds ganze drei.

Ich würde gern so viel wie möglich Serverseitig vorgeben. Alles was erst beim Client entschieden wird ist eher schlecht... :D

Grüße kami