3.5.1 Struktur- und layoutunabhängige Bugfixes
Alle struktur- und layoutunabhängigen Bugfixes für CSS-Bugs des Internet Explorers werden in der Datei iehacks.css im Ordner yaml/core/ zusammengefasst.
Wichtig: Das Stylesheet iehacks.css aus dem Verzeichnis yaml/core/ ist einer der Grundbausteine des YAML-Frameworks. Es liefert alle struktur- und layoutunabhängigen Bugfixes für den Internet Explorer (Versionen 5.x/Win - 7.0/Win). Diese Korrekturen sind essentiell für die Robustheit und fehlerfreie Darstellung YAML-basierter Layouts im Internet Explorer. Dieses Stylesheet ist in jedem YAML-basierten Layout erforderlich und sollte generell unverändert bleiben!
Grundlegende CSS-Anpassungen
YAML empfielt, in modernen Browsern (Internet Explorer 8, Firefox, Safari, ect.) generell vertikale Scrollbalken über die CSS3-Eigenschaft overflow-y zu erzwingen, um ein Springen zentrierter Layouts zu vermeiden (siehe Abschnitt 3.6). Im älteren Internet-Explorer Versionen sind diese Zwangsmaßnahmen nicht erforderlich, da die Scrollbalken im IE immer sichtbar sind und die Eigenschaft eher zu Problemen führt.
/**
* (en) No need to force scrollbars in older IE's ...
* (de) Scrollbar-Fix wird in alten IE's nicht benötigt ...
*
* @workaround
* @affected IE6, IE7
* @css-for IE6, IE7
* @valid no
*/
body { o\verflow:visible; }
Die nächste Deklaration betrifft in erster Linie den Internet Explorer 7. Dieser hat Schwierigkeiten beim Seitenzoom, YAML-basierter Layouts.
body { position:relative; }
* html body { position:static; }
#main { position:relative; }
Die relative Positionierung von body beseitigt die Zoom-Schwierigkeiten des IE7 weitestgehend. Zusätzlich wird auch #main mit dieser Eigenschaft ausgestattet. Dies ist hilfreich zur Vermeidung fehlerhafter Spaltenpositionierung infolge der Größenänderung des Browserfensters beim Einsatz der JS-Expressions im IE6.
Clearing-Methoden für IE anpassen
Die CSS-Anpassungen für das Clearfix-Clearing basieren auf den Erkenntnissen von Roger Johansson und berücksichtigen bereits den IE 7.
/* Anpassungen für Clearfix-Methode */
.clearfix { display: inline-block; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }
/* Anpassungen für Overflow-Methode */
.floatbox { width:100%; }
Der zweite Teil betrifft die CSS-Klasse .floatbox, durch welche die Overflow-Methode in YAML integriert ist. Die IE-Versionen werden durch die Breitenangabe mit der Eigenschaft hasLayout versorgt, wodurch diese Clearing-Methode auch in diesen Browsern benutzbar wird. Für den IE5.x und 6.0 ist dies zwingend notwendig, für den IE7 ist es eine Absicherung für die Druckausgabe, wo overflow:hidden wegen eines weiteren IE-Bugs nicht verwendet werden kann.
Robustheit des Layouts erhöhen
Zahlreiche CSS-Bugs lassen sich durch die Aktivierung der proprietären Eigenschaft hasLayout des Internet Explorers sehr einfach beseitigen. Für einige, der in der Quelltextstruktur vordefinierten Container kann dieser Bugfix ohne Bedenken quasi vorsorglich angewandt werden.
body { height:1%; }
/* IE6 & IE7 */
.page_margins, .page, #header, #nav, #main, #footer { zoom:1; }
/* IE 5.x & IE6 | IE6 only */
* html .page_margins, * html .page { height:1%; hei\ght:auto; }
/* IE 5.x & IE6 | IE6 only */
* html #header, * html #nav,
* html #main, * html #footer { width:100%; wid\th:auto; }
Die beiden das Layout umspannenden Container .page_margins und .page erhalten hasLayout über die Eigenschaft zoom:1 (IE6 & 7) bzw. height: 1% (IE 5.x) zugewiesen. Auf die Verwendung der Eigenschaft width wurde an dieser Stelle bewusst verzichtet. Da die Datei iehacks.css als letzte im Browser importiert wird, könnten hierdurch gestalterische Festlegungen des Seitenerstellers im Layout wieder aufgehoben werden.
Bei den inneren Containern wiederum ist die Verwendung von height problematisch, falls Container mit fixer Höhe erstellt werden sollen. Für den IE6 wird daher auf die proprietäre Eigenschaft zoom zurückgegriffen. Die Verwendung von zoom:1 hat keinerlei störende Nebenwirkungen. Zur Unterstützung des IE5.x wird der Box-Modell-Bug ausgenutzt, wodurch die Deklaration width: 100% problemlos verwendet werden kann. Der IE 5.0 kennt die Eigenschaft zoom noch nicht, weshalb diese zusätzliche Deklaration notwendig wird.
Wichtig: Aus Gründen der Abwärtskompatibilität sind die Regeln für die ehemaligen ID's #page_margins und #page weiterhin enthalten, wird jedoch nicht mehr zur Anwendung empfohlen. Verwenden Sie bei neuen Projekten die entsprechenden CSS-Klassen.
Unvollständige Darstellung der Spalteninhalte vermeiden
* html #col1,
* html #col2,
* html #col3 { position:relative; }
Ein weiterer Workaround hilft Darstellungsprobleme in älteren IE-Versionen zu vermeiden. Im IE5.x und IE6.0 kann es vorkommen, dass Inhalte nur teilweise oder gar nicht dargestellt werden. Die relative Positionierung der Spaltencontainer beseitigt dieses Problem.
Nach diesen allgemeinen Vorsichtsmaßnahmen, soll es im Folgenden um den Umgang mit den wichtigsten bekannten CSS-Bugs und deren Beseitigung gehen.
Escaping Floats Bug
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Ja |
Beim Escaping Floats Bug positioniert der Internet Explorer floats innerhalb eines DIV-Containers fehlerhaft. Zwei Probleme treten dabei auf. Erstens wird die Größe des umgebenden DIV-Containers falsch berechnet und zweitens laufen die floats nach rechts aus dem Container heraus.
Beide Probleme lassen sich durch die Aktivierung von hasLayout z.B. mittels height:1% lösen. Innerhalb des Basislayouts ist ein entsprechender Bugfix bereits unter dem Punkt "Robustheit des Layouts erhöhen" integriert, sodass dieser Bug nicht mehr auftreten kann. Es sind daher keine weitergehenden Maßnahmen erforderlich.
Guillotine Bug
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Nein |
Für den IE/Win Guillotine Bug des Internet Explorers existieren zahlreiche Auslösungskriterien, insbesondere Hover-Effekte bei Hyperlinks. Er ist sicherlich der mit Abstand bekannteste CSS-Bug des IE. Allerdings ist auch das sichere Vermeiden dieses Bugs nicht ganz einfach. Vermeiden lässt er sich fast nur, indem man — zumindest im Internet Explorer — auf Hover-Effekte verzichtet.
/* Guillotine Bug bei Änderung der Hintergrundfarbe von Links */
* html body a,
* html body a:hover { background-color: transparent; }
Double Float-Margin Bug
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Nein |
Bei der Positionierung von Float-Containern mit seitlichen Margins verdoppelt der Internet Explorer die Werte dieser Margins ("Doubled Float-Margin Bug") und sorgt daher gelegentliche Layout-Probleme, speziell bei der freien Anordnung der Contentspalten.
Bugfix: Der Bug ist glücklicherweise recht einfach zu beheben. Den beiden float-Spalten #col1 und #col2 wird dazu die Eigenschaft display:inline zugewiesen. Diese Eigenschaft wird bei float-Objekten von allen modernen Browsern ignoriert und sorgt dafür, dass der Internet Explorer 5.x und 6.0 die Margins korrekt darstellen.
...
* html #col1, * html #col2 { display: inline; }
...
Expandierende Boxen im Internet Explorer
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Nein |
Der Internet Explorer hat große Schwierigkeiten im Umgang mit übergroßen Inhalten innerhalb von Boxen mit festgelegter Breite. Siehe dazu Internet Explorer and the Expanding Box Problem.
Bugfix: Zur Beseitigung der Schwierigkeiten beim Textumbruch des Internet Explorers und damit einer saubereren Darstellung des Layouts erzwingt man einen speziellen Textumbruch-Modus des Internet Explorers:
...
* html #col1_content,
* html #col2_content,
* html #col3_content { word-wrap: break-word; }
...
Bei word-wrap: break-word handelt es sich um keine standardisierte CSS-Eigenschaft sondern um eine spezielle Eigenschaft, welche nur der Internet Explorer versteht. Sie erlaubt es dem Browser, Text nicht am Wortende sondern nach jedem Buchstaben umzubrechen. Dies beeinträchtigt zwar geringfügig die Lesequalität des Textes bei einer sehr kleinen Spaltenbreite, sichert dafür aber die Konsistenz des Layouts. Die älteren Versionen 5.x des Internet Explorers sprechen auf diesen Hack leider nicht an.
Übergroßen Inhaltselementen kann nur layoutabhängig begegnet werden. Hierfür werden weiter unten auf der Seite Vorschläge erläutert.
Internet Explorer und das Italics Problem
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Nein |
Der Italics-Bug des Internet Explorers ist einer der am schwierigsten zu erkennenden und daher vermutlich auch einer der am wenigsten bekanntesten CSS-Bugs. Der IE erweitert die Breite eines Containers sobald Inhalte mittels <i> oder <em> in Italics (also "schräg gestellte" Textpassagen) an den rechten Zeilenrand stoßen. Die CSS-Eigenschaft font-style: italics kann den Bug ebenso auslösen.
Die in diesem Fall stattfindende Erweiterung der Breite des Elterncontainers führt zu Problemen in float-basierten Layouts, da der entsprechende Container plötzlich nicht mehr in das Layout passt. Das Problem betrifft in erster Linie die statische Spalte #col3. In Verbindung mit dem Fehlen von hasLayout können statische Container sogar vollkommen ausgeblendet werden.
Bugfix: Der für dieses Problem bekannte Bugfix über die Zuweisung der CSS-Eigenschaft overflow:visible; ist sehr einfach. Damit er jedoch seine Wirkung voll entfalten kann, muss er möglichst allen Elementen einer Webseite zugewiesen werden. Dabei muss ein störender Einfluss auf den Layoutprozess vermieden werden. Aus diesem Grund wird der Bugfix in die base.css eingefügt, wo er vor jeglichen Layoutdefinitionen platziert wird.
* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }
Obwohl der Wert visible den Standard der Eigenschaft overflow darstellt, und seine Vorgabe daher eigentlich überflüssig ist, behebt dies das Italics-Problem ab dem IE5.5+. Für den IE5.01 gibt es leider keine Lösung. Allerdings ist dieser Browser auch kaum noch anzutreffen.
Zusätzlich müssen jedoch noch für den IE5.x und 6.0 noch Korrekturen vorgenommen werden, um eine korrekte Darstellung von textarea und input Elementen sicherzustellen. Diese werden in der iehacks.css definiert:
* html textarea { overflow:scroll; overflow-x: hidden; }
* html input { overflow: hidden; }
Disappearing List Background Bug
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Nein |
Der Disappearing List-Background Bug des Internet Explorers wird ausgelöst, sobald Listen innerhalb von floatenden DIV-Containern platziert werden. Innerhalb von YAML betrifft dies vorrangig Listen innerhalb der float-Spalten #col1 und #col2 sowie jede Liste innerhalb floatender Inhaltselemente. Der Bug sorgt dafür, das Hintergrundfarben oder -grafiken von Listenelementen gar nicht oder nur teilweise dargestellt werden.
Bugfix: Zur Beseitigung des Bugs wird den Listen die Eigenschaft position:relative zugewiesen. Dies hat im Allgemeinen keine Auswirkungen auf das Layout und beseitigt den Bug zuverlässig.
...
* html ul,
* html ol,
* html dl { position: relative }
...
List Numbering Bug
| IE 5.x/Win | IE 6.0 | IE 7.0 |
|---|---|---|---|
Bug aktiv | Ja | Ja | Ja |
Der List Numbering Bug des Internet Explorers ist der letzte Bug in der Liste der struktur- und layoutunabhängig zu behebbaren CSS-Bugs. Er wird ausgelöst, sobald Listenelemente innerhalb geordneter Listen das Merkmal hasLayout erhalten. In diesem Fall versagt in allen IE-Versionen die korrekte Nummerierung der Listenelemente.
Bugfix: Zur Beseitigung des Bugs wird den Listenelementen die Eigenschaft display:list-item zugewiesen. Dies hat im Allgemeinen keine Auswirkungen auf das Layout und beseitigt den Bug zuverlässig.
body ol li { display:list-item; }
Über den Zusatz body im Selektor wird die Spezifität des Bugfixes erhöht.
