3 Pixel Abstand beim IE

Bei meinem aktuellem Projekt ist mir wieder ein altbekannter Internet Explorer-Bug über den Weg gelaufen :-). Es handelt sich dabei um “IE Three Pixel Gap” bzw. “The IE Three Pixel Text-Jog” (frei übersetzt: die drei Pixel breite Lücke/Kluft/Abstand). Dieses Phänomen tritt auf in Verbindung mit floatenden Menüs und Internet Explorer (Windows 5.0-6).

Beispiel

Hier ein Screenshot eines einfachen 3-Spalten-Layouts:

Nichts besonderes, es ist nur ein Beispiel. Das linke und rechte Navigationselement floaten (float: left; und float: right;) und der Inhalt bekommt jeweils rechts und links den entsprechenden Margin-Wert (äußerer Abstand).

Sieht soweit gut aus. Aber der Fehler taucht auch erst auf wenn man im Inhalstbereich den Text einfügt und ihn durch Absätze (<p>) strukturiert. An der Stelle bzw. Höhe wo das linke floatende Element aufhört, verschiebt sich der Text im Inhaltsbereich um 3 Pixel nach links.

Die Vergrößerung des oberen Screenshots, aus dem problematischen Bereich, verdeutlicht dies. Um den Fehler zu verdeutlichen, habe ich im Bild eine vertikale Linie gezogen. Je nach dem, wie man den Text strukturiert kann sich die optische Wirkung dieses Fehlers vergrößern und richtig auffallen. Der Fehler tritt auf weil der Internet Explorer allen Absätzen, die den floatenden Bereich berühren bzw. an ihn angrenzen, einen Abstand von 3 Pixel zufügt. Jegliche Versuche die Abstände zu vergrößern bzw. zu verkleinern helfen nicht.

Lösung

Auf Positioniseverything.net gibt es eine Lösung zu diesem Problem. Man nutzt dabei den HTML-Selektor in der CSS-Datei.:

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #floatbox {
margin-right: 10px;
}
* html p {
height: 1%;
margin-left: 0;
}
/* End hide from IE5/mac */

Alle Browser außer Internet Explorer ignorieren * html als CSS-Selektor und übergehen diese Angaben. IE Mac, der * html interpretiert, aber nicht den 3-Pixel-Abstand zufügt, wird durch den Kommentartrick (\) von dieser Angabe ausgesperrt.

Bei dieser Angabe geht es darum den Absätzen eine sehr kleine Höhe zu geben, die nachher durch den Inhalt angepasst wird. Angeblich wäre das Problem somit gelöst. Die Betonung liegt auf angeblich, da es bei mir nicht funktioniert hat :-). Ich habe alles versucht, aber es hat nicht geklappt .

Meine Lösung

Für dieses Problem ist es auch dem Inhaltsbereich eine feste Breite zu geben. Somit verschwindet das Problem. Aber es taucht ein neuer Problem auf. Und zwar wieder im Internet Explorer (wer den sonst *g*). Mozilla, Opera und Safari geben sich zufrieden mit der ausgerechneten Breite. Aber alle Internet Explorer Versionen (Windows) sind mit der richtigen Breite nicht zufrieden und verschieben den Inhalt unter der Hohe der Navigation, obwohl rechts und links noch genug Platz war.

Im konkreten Beispiel war die ausgerechnete Breite 470 Pixel und alle IEs haben den Inhalt auf die richtige Höhe eingereiht, als ich die Breitenangabe von 462px angegeben habe. Soweit ich das nachvollziehen kann, fügt IE in solchen Fällen zusätzliche Abstände. Ich habe alle Angaben zum Padding (innerer Abstand) und Border (Rahmen) weggelassen, damit nicht der Box-Modell-Bug zum Vorschein kommt. Aber das hat den IE nicht beeindruckt. Daher habe ich für mich folgende Eingabe entwickelt:

/* Vom IE mac 5.x verstecken. Fix für den Windows IE 3px-Text-Gap-Bug \*/
* html #inhalt {
width: 462px;
}
/* Ende von IE5/mac verstecken*/


Alle Browser die keine Probleme mit den 3-Pixel-Abstand haben passen sich die Breite für den Inhaltsbereich automatisch an und die IEs in Windows bekommen eine feste Breite. Und somit war für mich das Problem gelöst.

Verwandte Beiträge:

• Internet Explorer 10 für Windows 7 und Google Chrome zeigt die Krachmacher an
• Browserstats: Aufstieg von Google Chrome und Abstieg von Mozilla Firefox gestoppt
• Sponsored Post: Internet Explorer 9 – Jetzt das Web neu entdecken
• Der CSS3-Test für Browser
• Webstats: Browser und Betriebssysteme