CSS Bug beim Internet Explorer 6

Erstellt von Frithjof Thu, 05 Apr 2007 18:53:00 GMT

Hier folgt neben den Lektionen mal ein Artikel zu einem interessanten Bug des Internet Explorers, der mir heute erstmals begegnet ist.

Zufällig hatte ich das Vergnügen mit einem Internet Explorer Version 6 die letzte Lektion 6 zu besuchen. Dabei habe ich festgestellt, dass entlang der Seite mit jedem neuen Codebeispiel der angezeigte Text weiter nach links verrutscht. Das passiert nicht im neuen Internet Explorer 7, nicht im Firefox oder auch nicht im Opera Browser. Andere habe ich nicht getestet. Ich sah schon eine lange Nacht des CSS – Debuggens vor mir. Aber es ging doch schneller als ich dachte.

Ich verwende auf rubykids.de zum Hervorheben des Rubycodes den CodeHighlighter von Dan Webb. Zum Beispiel sieht der HTML Code für eines der Rubyprogrämmchen aus der sechsten Lektion so aus:


<pre><code class="ruby">
# lektion6_a.rb

require 'rubykids'

richtung = "R" 

if richtung == "R" then schreibe "Ich fahre nach rechts" end
if richtung == "L":     schreibe "Ich fahre nach links" end

</code></pre>

Als Ursache für den Linksdrift habe ich die Leerzeile vor dem schließenden code-Tag ausgemacht. Sobald ich diese Leerzeilen in allen pre/code Abschnitten lösche, sieht die Seite im IE6 korrekt aus.

Aber das ist noch nicht alles. Füge ich stattdessen noch eine Leerzeile vor jedem schließenden code-Tag hinzu passt es auch wieder. Bei drei Leerzeilen wieder nicht, bei vieren wieder und so weiter. Es sieht also so aus, dass eine ungerade Anzahl von Leerzeilen vor dem schließenden code/pre-Tag den Fehler verursacht. Irgendwie scheint der IE bei der Berechnung der inneren oder äußeren Abstände dort durcheinander zu geraten.

Linksdrift mit Internet Explorer 6

Internet Explorer 6, wie es sein sollte

Ich konnte nicht wirklich genau herausfinden woran es liegt. Sicher eine bestimmte Konstellation von CSS Styles. Es reichte aber zumindest teilweise, den CSS Code für das pre-Tag anzupassen, damit die Codeabschnitte auch für den IE6 korrekt angezeigt werden. Wird der innere Rand des pre-Tags mit padding-left: 8px gesetzt anstatt mit padding: 8px funktioniert es.

Für den Text drumherum nützt das allerdings nicht viel. Ich muss wohl doch den Leerraum unmittelbar vor allen schließenden code/pre-Tags anpassen.

Eine andere Möglichkeit wäre noch gewesen, den linken Rand des pre-Tags zu entfernen oder anzupassen, scheinbar stört dieser den IE6. Ich müsste

border-left:  3px solid #c06;
ersetzen durch

border-left:  3px solid #c06;
border-bottom:3px solid #000;
border-right: 3px solid #000;
border-top:   3px solid #000;

Das würde am linken Rand oben und unten eine kleine Überlagerung vom oberen und unteren mit der Hintergrundfarbe gezeichneten Rand hinterlassen.

Peter hat’s nicht verstanden und Livia erklärt es ihm

Peter: Ich wusste gar nicht, dass es außer dem Internet Explorer noch andere Browser gibt.

Livia (die Augen verleiernd): Du darfst dich auf dem Spielplatz ruhig auch mal auf’s Klettergerüst trauen! Zumindest besorge dir wenigstens die neueste Version des IE. Der IE7 hat zwar auch seine Schwierigkeiten mit den Codepassagen – er verdichtet allen Leerraum trotz pre-Tag – aber zumindest den Bug mit dem Linksdrift scheint es nicht zu geben.