Bugs / Lösungen für Internet Explorer, Firefox und Co.

[Nina]

Hier werden wichtige Buglösungen für die verschiedenen Browser gesammelt. Bitte schickt eure Vorschläge (am besten mit Link zu einer möglichst deutschsprachigen Lösungserklärung) per PM an mich. Ich prüfe die Vorschläge und trage sie ein, wenn sie noch nicht in der Liste sind und die Lösungsinfos nachvollziehbar sind.

[Nina]

Mein Tipp ist, dass ihr per Conditional Comments ein Extra-Stylesheet für den IE einbindet. So müsst ihr nicht in eurer Hauptdatei herumgraben, sondern habt alle Bugfixes übersichtlich an einem Ort.
Erklärung zur Nutzung von CC

Abstände zwischen verlinkten Listenpunkten einer Navigation
Eine horizontale oder vertikale Navigation zeigt im IE zwischen den Listenpunkten unerklärliche Abstände. Eine Erklärung und Lösung dazu gibt es im XHTML-Forum oder eine alternative Herangehensweise hier bei Bereastreet

Guillotine: Seitenbereiche werden abgeschnitten, wenn Links gehovert werden
Ausführlichere Erklärung und Buglösung

Peekaboo: Seiteninhalte werden nicht angezeigt; Erscheinen plötzlich wieder durch Herumscrollen oder Neuladen der Seite
Die bekannteste Lösung ("position: relative" für die betroffenen Container notieren) führt zu Problemen im IE/Mac. Eine einfachere Lösung ist die Vergabe der Anweisung #beispiel { line-height: 1.2; } für den Container.
Ausführlichere Erklärung und Buglösung
Ausführlichere Erklärung und Buglösung #2 - Line-Height Lösung

Disappearing Content Bug - Der kleine Bruder vom Peekaboo
Inhalt wird im IE6 und niedriger gar nicht angezeigt (meist in Verbindung mit floatenden Bereichen). Irgendein Element vermisst "hasLayout". Meist ist es das Element (z.B. div) in dem der Text steht. Weißt man diesem dann die passende hasLayout-Aktivierungsanweisung zu (z.B. height: 1%; oder width: 100% [nicht auto!]), müsste der Inhalt wieder auftauchen.
Erläuterung

Doubled Float-Margin: Margin-Angaben werden verdoppelt
Die betroffenen floated Container mit der Angabe #beispiel {display: inline;} versehen.
Ausführlichere Erklärung und Buglösung

Disappearing List Background: Bei Listen werden die Hintergrundfarben oder -grafiken nicht angezeigt
Allen Listenarten die Angabe ul, ol, dl { position: relative; } zuweisen.
Ausführlichere Erklärung und Buglösung

3-Pixel Gap: Unerwünschter zusätzlicher 3-Pixel Abstand
Kann ebenfalls durch die Height-Angabe wie bei der Guillotine behoben werden.
Ausführlichere Erklärung und Buglösung

Italics: Unerwünschte Erweiterung der Inhaltsbox wenn kursiver Text genutzt wird
Vergabe von #beispiel { overflow: visible; } an den entsprechenden Container.
Ausführlichere Erklärung und Buglösung

Jumping Link Bug
Es gibt einen Bug, der dem Guillotine-Bug sehr ähnelt. Hovert man über einen Link, springt dieser plötzlich ein ganzes Stück nach links / rechts (je nachdem). Die Lösungen für den Guillotine-Bug und ähnliche Bugs helfen hierbei nicht, denn der Auslöser ist meist eine falsche Berechnung des IE von Prozentangaben (z.B. padding: 2%).
Eine genauere Erklärung gibt es hier.
Eine Lösung ist die Vergabe von fixen Angaben statt z.B. der Prozentangabe für das Elternelement: #beispiel { padding: 10px; }
Auch möglich: Den Browser absichtlich in den Quirksmode schicken, da der Fehler anscheinend nur im Standard Complient Modus auftritt.

Duplicate Characters Bug
Verdoppelung von Seitenabschnitten ohne Zusatzcode
Zur Bugbeschreibung und -lösung

No Scrolling Bug
Im IE6 und höher wird Scrollen (unerwünscht) deaktiviert, sobald jemand dem BODY und HTML Element im Strict-Modus die Anweisung position: relative zuweist.
Lösung? Einfach nicht beiden Elementen zusammen diese Anweisung geben

Schriftgrößen-Bug (bei relativen Angaben
Der IE hat einige Schriftgrößen-Bugs, wenn man relative Angaben (% oder em) nutzt. So kann es zu riesigen Schriftsprüngen kommen, wenn jemand im IE die Schrift vergrößert oder verkleinert.
Lösung: Dem Body eine Schriftgröße von 100.01% verpassen (nicht 1em oder gar keine Schriftgrößenangabe!) und darauf achten, dass auf der Website möglichst keine Angaben unter 0.8em oder 80% auftauchen.
Genauere Erläuterungen gibt es hier:
http://css-technik.de/details/2/5/CSS-Browser-Bugs.htm

[Nina]

Firefox - Link nicht sauber anklickbar ("flickering mouse")
Manchmal lassen sich Links nicht sauber anklicken. Das Hand-Icon der Maus erscheint nicht wie erwartet wenn man mit der Maus über die Buchstaben des Links fährt, sondern erst an unerwarteten Stellen rund um den Link. Es wirkt, als würde die Maus über dem Link "flackern".
Lösung: Den Links ein position: relative; zuweisen.

Firefox - Flackern durch Änderungen an der Deckkraft eines Bildes
Wenn man ein Bild auf 50% Deckkraft (opacity) gesetzt hat und durch einen MouseOver auf 100% setzt (Wert von 1.0), flackert es.
Lösung: Setzt man statt 1.0 einen Wert von 0.99, gibt es kein Problem.

Firefox - Buttons mit unterschiedlichen Schriftgrößen falsch ausgerichtet
Wenn man die Schriftgröße eines Inputbuttons verkleinert angibt (z.B. 80% statt 100%) zeigt der Firefox die Schrift innerhalb des Inputbuttons nicht mehr vertikal mittig an. Eine genaue Erklärung mit Screenshots gibt es hier.
Lösung: Man muss den Inputs ein vertical-align von top, bottom, text-top oder middle zuweisen.

Firefox - Inputfeld und Submitbutton (nebeneinander) haben unterschiedliche Höhen
Dieser Bug (der auch im IE auftritt und dort anscheinend unlösbar ist) entsteht dadurch, dass der Browser einen Inputbutton nach dem traditionellen Boxmodell (Höhe = Border + Padding + Inhalt) berechnet, während für das normale Inputfeld das W3C Boxmodell genutzt wird. Eine genaue Erklärung mit Screenshots gibt es hier.
Lösung: Man muss dem Button ein -moz-box-sizing: content-box zuweisen.

Firefox - Printing tables on several pages (Tabellen über mehrere Seiten ausdrucken)
Wenn man Tabellen ausdrucken will die sich über mehrere Seiten ziehen (und am besten noch thead und tfoot enthalten), zeigt der Firefox auf den Folgeseiten die Inhalte der Spalten nicht mehr an. Das kommt von einem uralten Firefox Printing-Bug der schon lange Zeit existiert und wohl erst in der 3er Version gelöst werden soll.
Lösung: Man muss ein Print-Stylesheet anlegen und darin definieren:

td, th, tfoot, table { height: 100%; }

Wichtig: Zusätzlich muss für den IE ein Extra-Print-Stylesheet angelegt werden, in dem diese vorhergehende Festlegung wieder relativiert wird, da der IE sonst jede Spalte auf einer Extraseite ausdruckt.

[Nina]

Opera 9 - Innerhalbt einer Tabelle: unerwünschter Abstand rechts neben Inputbuttons
Wenn im Opera9 ein Inbutbutton innerhalb einer Tabellenzelle steht, wird rechts neben ihm ein unerwünschter Abstand angezeigt. Durch Zoomen verschwindet dieser Bug, erscheint aber sofort wieder wenn die Seite neu geladen wird. Der Fehler erscheint nicht, wenn stattdessen das Button-Element genutzt wird. Eine genaue Erklärung mit Screenshots gibt es hier.
Lösung: Mit padding: 0; kann man den Abstand verringern (Margin funktioniert nicht).

Opera 6 bis 8 - Overflow-Bug wenn ein Element mit Position-Angabe keine explizite Breite hat
Wenn ein Element dem position: relative oder position: fixed zugewiesen wurde keine explizite Breitenangabe hat, funktionieren overflow: auto und overflow: scroll im Opera 6, 7, oder 8 nicht korrekt (Ausnahme: Opera 7.02).
Lösung: Die (komplizierte und nicht sonderlich schöne) Lösung hierfür wird hier beschrieben.

Opera 7.54 - Floating in absolut positionierten Elementen funktioniert nicht korrekt
Ein Beispiel für diesen Bug gibt es hier.
Lösung: Man muss dem absolut positionierten Element eine Breite zuweisen (egal welcher Wert).

[Nina]

Safari 2 - Verschwindender Formularinhalt
Wenn sich ein Formular innerhalb eines DIVs befindet, dem man die Clearfix-Klasse zugewiesen hat, kann es passieren, dass der Inhalt des Formulars nicht angezeigt wird (Beispiel).
Lösung: Man muss dem umhüllenden DIV display: block zuweisen.

Safari - Element behält Position:Absolute-Angabe trotz Klassen-/Statusänderung bei
Eine Technik die gerne im Zusammenhang mit Sprunglinks genutzt wird, ist das vorübergehende Verstecken von Inhalten die per Klassen-/Statusänderung (bei Links) dann auf Wunsch wieder angezeigt werden. Das Prinzip funktioniert so, dass das Zielelement aus dem sichtbaren Bildschirmbereich rausgeschoben bzw. wieder eingefügt wird. Der Safari kommt damit teilweise nicht zurecht und schafft es nicht, das Element nach der Änderung wieder im Dokumentenfluss anzuzeigen (Beispiel).
Lösung: Man muss den Child-Elementen des Ziels ein position: relative zuweisen (siehe Beispielseite).