Disappearing-List-Bug

Eine Liste, dessen li-Tags eine Hintergrundfarbe enthalten (üblich für Navigationslisten) in einem Float, der gleichzeitig die position: relative zugeweisen wurde: Der erste Listenientrag zeigt im IE die Hintergrundfarbe nicht oder nur teilweise.

Bug Fix

Die Lösung: Der Liste eine realtive Positionierung zuweisen. Die Liste ist im normalen Fluss und deshalb hat die Positionierung relative keine anderen Auswirkungen.
ul, ol, dl {position: relative;}

http://www.positioniseverything.net/explorer/ie-listbug.html

3-Pixel-Jog-Bug

Durch diesen Fehler werden Inhalte von nebeneinander floatenden Boxen um 3 Pixel versetzt dargestellt. Dieser Versetz verschwindet unterhalb der Unterkante der auslösenden Float-Box.

Bug-Fix

Hier am Beispiel eines p-Tags:

/* Start hide from IE-Mac \*/
* html p {
height: 1%;
margin-left: 0;
}
/* End hide from IE-Mac */

Durch die Aktvierung von hasLayout = true wird der Versatz nicht behoben, sondern auch auf die restlichen Absätze angewandt und somit nicht mehr als Versatz sichtbar gemacht.

Escaping-Floats-Bug

Innnerhalb einer statischen Box ohne spezielle Breitenangabe werden mehrere Fliessobjekte eingefügt. Die Box enthält zudem einen rechtes margin. Im Anschluss serden die Floats durch ein leeres Div innerhalb der statischen Box wieder aufgehoben. Im IE brechen die floatenden Boxen aus.

Bug Fix

Alle Optionen, die das Merkmal hasLayout=true setzen. Siehe dazu hasLayout.
Ein spezieller Kommentar sorgt dafür, dass der Hack dem IE/Mac vorenthalten wird:

/* Start hide from IE-Mac \*/
* html #container { height: 1%; }
/* End hide from IE-Mac */

• Position is everything

Double-Float-Margin

Wenn ein floatendes Objekt ein margin in der Floatrichtung aufweist (Beispiel: margin-left bei float: left), wird dieser Abstand im IE verdoppelt.

Bug Fix

div#float {
float: left;
width: 200px;
display: inline;
margin-left: 100px;
....
}

Mit display: inline wird der Blockcharakter eines Elementes aufgehoben, hat hier aber keine Bedeutung, ausser dass der Bug behoben wird!

Unscrollabel-Content

Innerhalb einer relativ positionierten Box ohne feste Dimensionen wird eine weitere Box absolut positioniert. Beim Verkleinern des Fensters im IE wird diese 2. Box ignoriert. Es erscheinen keine Rollbalken.

Bug Fix

Alle Optionen, die das Merkmal hasLayout=true setzen. Siehe dazu hasLayout.
Ein spezieller Kommentar sorgt dafür, dass der Hack dem IE/Mac vorenthalten wird:

/* Start hide from IE-Mac \*/
 * html #divname { height: 1%; }
/* End hide from IE-Mac */

Peekaboo-Bug

Ausgangslage für diesen Bug liefern ein Div mit fliessender Breite (width: auto) und ein darin eingebettetes gefloatetes Element. Unter diesen Umständen bildet der IE Inhalte neben dem Float nicht oder unvollständig ab, bis die Fenstergrösse verändert wird oder ein Link geklickt wird.

Bug Fix

Zwei Möglichkeiten, situationsbedingt die bessere wählen:

1. Durch die Vorgabe einer Höhe wird hasLayout = true gesetzt (Holly Hack): div#static {height: 1%;}
2. Durch Angabe einer Zeilenhöhe: div#static {line-height: 1 em;}

http://www.positioniseverything.net/explorer/peekaboo.html

Gullotine-Bug

Führt zu Beschneiden des unteren Bereiches eines floatenden Elementes, wenn User mit Mauszeiger Hover-Effekt bestimmter Links auslöst:

Häufigster Bug, da er durch zahlreiche Mechanismen ausgelöst wird:

• statischer DIV-Container
• beliebiges floatendes Element, welches nicht gecleared wird
• Links innerhalb statischen Container, die im Quelltext nach dem floatenden Element kommen
• eine a:hover Regel

Innerhalb der a:hover-Regel führt jede Änderung der folgenden Eigenschaften den Bug aus:
background, padding, text-style, border

Workaround

Sicherste Methode ist Clearen der Fliessumgebung durch nachfolgendes leeres DIV auserhalb der statischen Box.
<div style="clear:both"> </div>
Oder: In IE auf Hover-Effekte verzichten.

HasLayout

Der Internet Explorer verfügt intern über ein eigenes Layoutkonzept mit dem Qualitätsmerkmal hasLayout.
Detaillierte Anweisungen im Artikel on having layout.
Vor allem das «Fehlen von Layout» ist für viele ungewöhnliche und nicht abschätzbare Verhalten im IE zuständig:

• Auftreten der meisten Float-Bugs
• unterschiedliche Interpretation simpler Eigenschaften einer Box
• Fehler bei Interpretation von Aussenabständen zwischen Boxen und ihren Elternelementen
• Unterschiede bei Positionierung von Hintergrundgrafiken

Grundlagen für die Vergabe von hasLayout

Folgende Elemente werden automatisch mit Qualität hasLayout belegt:

• position: absolute
• float: left | right
• display: inline-block (verfügbar ab IE 5.5)
• width: beliebiger Wert ausser auto
• height: beliebiger Wert
• zoom: beliebiger Wert (proprietär ab IE 5.5)
• writing-mode: tb-rl (proprietär)

In IE 7.0 kommen weitere Kombinationen hinzu:

• overflow: hidden | scroll | auto
• overflow-x | overflow-y: hidden | scroll | auto
• position: fixed
• min-width: beliebiger Wert
• max-width: beliebiger Wert (ausser none)
• min-height: beliebiger Wert
• min-height: beliebiger Wert (ausser none)

CSS Tools

Ein nützlicher Link zu Tools, die das Leben mit CSS vereinfachen:
www.smashingmagazine.com

Navigation bei www.smashingmagazine.com


CSS-Layouts bei www.smashingmagazine.com