HTML/CSS - Bugs & Hacks - Grundsätzliche Tipps für den IE
1. Die Abschnitte
- Überblick
- Grundsätzliche Tipps für den IE
- Conditional Comments
- Double Margin Bug
- Three Pixel Text Jog
- Listen Bug
- Duplicate Characters Bug
- Fieldset Bleed Bug
2. Die Versionen
Alle folgenden Informationen basieren auf den Versionen 6.0 und 7.0. Denn mit dem 8.0 hat Microsoft endlich(!) mal einen großen Sprung in Richtung Standardkonformität gemacht. Darum könnt ihr alle diese Tipps für den vergessen, der braucht sie gottlob nicht.
3. Die Wurzel allen Übels
... ist eine Microsoft-spezifische Implementierung für den Internet Explorer und nennt sich "hasLayout". Diese Eigenschaft ist für viele Darstellungsfehler verantwortlich. Da sich schon andere zu diesem Thema ausführlich geäußert habe verweise ich nur auf eine gute Einführung zu dieser Thematik. Mir selber geht es hier nur um grundsätzliche Lösungsmöglichkeiten.
4. Die Bugs
... die auf oben genanntem Problem beruhen, sind so zahlreich wie die Sterne am Firmament. Da hätten wir zum Beispiel den "Three Pixel Text Jog" (auch 3-Pixel Bug genannt), den "Peek-a-boo" Bug, den "Duplicate Characters Bug" oder den "Guillotine Bug". Gut, Sterne gibt es mehr, aber was soll's.
5. Die Vorgehensweise
Wenn also irgendetwas nicht koscher aussieht oder mehrere Bugs in Kombination auftreten, so sollte man, wenn man nicht mehr weiter weiß, sich an die folgenden Tipps halten.
6. Floaten und Clearen
1. Sauberes Floaten
Wenn mehrere Block-Elemente nebeneinander stehen sollen, so müssen alle gefloatet werden.
2. Sauberes Clearen
Alle Elemente, die unterhalb der oben beschriebenen stehen, müssen mit einem entsprechenden clear versehen
werden.
Die Details dazu kommen im folgenden Abschnitt.
7. Abstandsmanipulation
Tipps
1. Negative Margins
Wirken sehr oft wahre Wunder, wenn man sie bei margin-left und/oder margin-right einsetzt. Als
Grundwert sollte man mit -3px; anfangen und den Wert so lange vergrößern, bis es passt.
2. Zusätzliches Floaten
Sobald man mit negativen Margins arbeitet, sollte man auch die entsprechenden float-Anweisungen einsetzen.
Also zum Beispiel bei einem margin-right ein float: right.
3. Kombination
Man sollte sich nicht nur auf eine Richtung konzentrieren, sondern beide im Auge behalten. Also ggf. mit left
und right herumspielen, sowohl beim float, als auch beim margin.
8. Breiten- und Höhenangaben
Tipps
1. Die "Mini"-Höhe
Manchmal hilft es, wenn man einem Element eine extrem geringe Höhe gibt. Dabei gibt die Varianten height: 1%; und
height: 1px;. Welche jetzt nun besser sein soll, darüber streiten sich die Experten immer noch. Mein Tipp: probiert
eine aus und wenn die funktioniert, dann reicht das.
3. "falsche" Breitenangaben
... sollten eingesetzt werden, wenn irgendwo was nicht passt. Dabei kann der Wert sowohl kleiner als auch größer sein, Hauptsache es funktioniert.
9. Leeres "Clear"-Element
1. Die letzte Rettung
... ist oftmals eine leeres <div>-Element, das man innerhalb der Elemente setzt, die Probleme bereiten.
Das ist zwar nicht das Gelbe von Ei, aber leider oft die letzte Rettung: <div style="clear:both"> <div>.
9. Probieren geht über studieren
Manchmal kommt es vor, dass mehrere Bugs an einer Stelle in Kombination auftreten, so dass einzelne Hacks nicht mehr greifen. Ich selber musste mich mal bei einem Element gleichzeitig(!) mit dem "Three Pixel Text Jog", dem "Duplicate Characters Bug" und dem "Guillotine Bug" herumschlagen. Da hilft nur eines! Ausprobieren, tricksen, rumpfuschen, bis es auch im Internet Explorer 6/7 so aussieht, wie es sein sollte. Leider kann das manchmal sehr frustrierend sein, aber eines müsst ihr mir glauben. Wenn ihr das Problem gelöst habt, ist das fast so gut wie Sex (manchmal sogar noch besser).