CSS-Bugs des Internet Explorers

Wer schonmal ein komplexeres Layout mit Cascading Stylesheets umsetzen musste, dem wird vielleicht aufgefallen sein, dass der Internet Explorer an manchen Stellen ein seltsames Verhalten zeigt, das Layout zerlegt oder anderweitig Fehler in der Darstellung hat. Vor knappen zwei Jahren kam ich erstmals damit in Berührung und ich fand Möglichkeiten, die Probleme zu beseitigen. Anhand eines Beispiels möchte ich einige Details erläutern.

Neben vielen möglichen Bugs habe ich einen herausgesucht, der mir vor einigen Wochen begegnete und den ich so bis dato nicht kannte: Ein vom Text umflossenes Bild wurde im Internet Explorer einfach nicht angezeigt, obwohl es sich beim Aufruf der Bild-URL anzeigen ließ. Im ersten Moment dachte ich noch nicht an einen CSS-Bug und beließ es dabei.

Später aber tauchte das Problem an der gleichen Stelle wieder auf (mit anderem Bild und anderem Text), aber nicht das ganze Bild war unsichtbar, sondern nur ein Teil, als wenn das Bild nur zur Hälfte geladen worden wäre. Auf dem folgenden Bild habe ich das Kernproblem nachgebaut. Der Screenshot stammt aus dem Internet Explorer 7 – oben ist die fehlerbehaftete Darstellung, darunter kommt ein kleiner Fix zur Anwendung, den ich im Folgenden erklären werde.

Wie sich bei Betrachten des Bildes vermuten lässt, spielt der Hintergrund, der im Beispiel grau ist, eine Rolle bei dem Problem. Doch wieso wird das Bild ab einer ganz bestimmten Stelle vom Hintergrund verdeckt? Als ich diesen Bug das erste Mal untersucht habe, dachte ich beim Betrachten des nebenstehenden Textes, dass es vielleicht mit der kursiven Schrift zusammenhängt. Dass der Internet Explorer Probleme mit kursiver Schrift hat, war für mich nichts Neues, gibt es doch andere Bugs, die damit zusammenhängen.

Im Text gibt es mehrere kursive Wörter, aber beim ersten Auftauchen der Kursivschrift („diam voluptua“) ist noch alles in Ordnung, das Problem scheint erst 2 Zeilen später zu beginnen. Erst nach weiterem Betrachten kam mir eine Idee, die ich dann durch Modifizieren des Textes verifizieren konnte: Das zweite Auftauchen von kursivem Text („no sea takimata sanctus“) wird durch einen automatischen Zeilenumbruch getrennt und genau oberhalb der Zeile, in der dieser kursive Text beginnt, ist das Bild abgetrennt.

Der minimal nötige Versuchsaufbau sieht also so aus, dass es ein Block-Element geben muss, das einen Hintergrund definiert (ob Hintergrundbild oder -farbe ist dabei egal). Innerhalb des Elements gibt es ein Bild, dass aus dem Textfluss herausgenommen wird (zum Beispiel durch die CSS-Eigenschaft float) und natürlich der Text, der dadurch neben dem Bild erscheint. Außerdem muss der Text zumindest in Teilen kursive Schrift enthalten, die automatisch umgebrochen wird. Damit das gegeben ist, habe ich noch ein Wrapper-Element drumrum gebaut, das eine feste Breite vorschreibt – wird die Breite direkt in das schon bestehende Block-Element geschrieben, ist der Fehler nicht sichbar. Wieso, erkläre ich noch.

Das sind Faktoren, die das Auftreten des Bugs eher selten machen und zufällig erscheinen lassen. Tritt der Umbruch des kursiven Textes ganz oben auf, verschwindet das Bild völlig, tritt so etwas nicht auf, ist es gänzlich zu sehen, ist der Umbruch in der Mitte, so erscheint das Bild nur zur Hälfte. Aber hier erstmal der HTML-Code, gefolgt von den eben beschriebenen Styles:

<div class="wrapper">
	<div class="background">
<img src="invisible-sandwich-2.jpg" style="float: left;" /> Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed <em>diam voluptua</em>. At vero eos et accusam et justo duo 
dolores et ea rebum. Stet clita kasd gubergren, <em>no sea takimata sanctus</em> 
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua. <em>At vero</em> eos et accusam et justo duo dolores et ea rebum. Stet clita 
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>
div.wrapper {
	width: 560px;
}

div.background {
	background-color: gray;
}

Die Lösung des Problems gestaltet sich recht einfach – zumindest, wenn man sich schonmal mit dem Thema auseinandergesetzt hat. Kern des Bugs ist, wie bei vielen weiteren auch, die hasLayout-Property. Das ist eine nur im Internet Explorer vorhandene Eigenschaft, die jedes Element hat und die je nach angewendeten Styles entweder wahr oder falsch ist.

Standardmäßig hat ein Element „kein Layout“, hasLayout ist also false. Das ist der Auslöser für viele Darstellungsprobleme des Internet Explorers, wie z.B. unsichtbarer und unter bestimmten Bedingungen wieder auftauchender Text. Auch in unserem Fall ist das nicht vorhandene „Layout“ das Übel, dort betrifft es das Element, das den Hintergrund definiert. Setzen wir für dieses Element hasLayout implizit auf true, so können wir den Bug beseitigen.

Wie geschieht das? Verschiedene Style-Angaben lösen das aus, allen voran Breiten- und Höhenangaben. Das ist auch der Grund, wieso der Bug nicht auftritt, wenn die in unserem Beispiel durch das Wrapper-Element vorgegebene Breite direkt durch das Element mit dem Hintergrund definiert wird. Beim Internet Explorer 7 tut es auch min-height, die einfach auf 0 gesetzt wird und damit keinerlei sonstigen Einfluss auf die Darstellung hat:

div.background {
	background-color: gray;
	min-height: 0; /* Fix for IE-Bug */
}

Das war auch schon alles und der Tag ist gerettet. Aber wie ist das bei der Version 6 des Internet Explorers? Der kennt die Eigenschaften min-height und min-width schließlich nicht. In unserem Fall ist das aber überhaupt kein Problem, da der IE6 diesen Bug scheinbar nicht hat, er tritt also nur mit Version 7 auf. Da hat Microsoft also ganze Arbeit geleistet, neben alten Bugs auch noch neue rein zu bringen. Hoffen wir, dass es mit Version 8 besser wird.

Der Vollständigkeit halber will ich aber noch beschreiben, wie man im IE6 einem Element Layout gibt. In diesem Fall hilft uns nämlich ein weiterer Bug (ja, manchmal sind die sogar nützlich): Ein Element, dessen hasLayout-Property true ist, wird automatisch so groß, wie es die darin enthaltenen Elemente verlangen. Geben wir einem Element also eine Höhe von 0, so hat es Layout und alles wunderbar. Aber in dem Fall muss man aufpassen, dass kein anderer Browser diese Angabe sieht, was entweder durch den StarHTML-Hack möglich wird oder, was ich prinzipiell bevorzuge, durch Conditional Comments.

Wer einen Internet Explorer sein eigen nennt, der kann sich das Beispiel mit und ohne Fix auch live ansehen. Beachtet aber, dass der Fehler nur mit Version 7 zu sehen ist.

Wer auf einer eigenen Seite Darstellungsprobleme mit dem Internet Explorer hat oder sich grundsätzlich mit dem Thema auseinandersetzen will, der sollte sich die Kategorie Explorer Exposed! von Position Is Everything ansehen, denn dort sind fast alle IE-Bugs zusammen mit möglichen Lösungsvarianten notiert – nur den von mir hier beschriebenen habe ich in der Form dort nicht gefunden. Viel Spaß beim Stöbern in den teils recht skurrilen Fehlern wie dem Peekaboo Bug oder dem Three Pixel Text Jog.

Tags:

1 Pingback

  1. Buch: Fortgeschrittene CSS-Techniken - rattlab.net 13. September 2008 um 22:32

Keine Antworten

Die Kommentfunktion ist nicht aktiviert.