CSS - Hacks

Hacks

Sternchen Hack

Anwendung: Anweisungen nur für IE 5 und 6 z.B.

* html {...} /*das sehen nur IEs*/

Zukunftssicher: ?

Box Model Hack / Tantek Hack

IE 5 und IE 5.5

Anwendung: Box Model Fehler von IE 5/5.5 korrigieren

Beispiel:

#kasten{width: 360px;}
* html #kasten{       /*Das beachten nur IEs*/
  width: 400px;       /* der 'Falsche' Wert für alte IEs */
  w\idth: 360px;      /* das sieht nur der IE 6 */

}

Zukunftssicher: ja

Kind Selektor Hack

IE versteht den KindSelektor nicht. Z.B.

body > p 

Anwendung: Höhe nur für IE setzen (IE braucht Höhenangaben z.B. wg. Inline Padding Bug.)

Beispiel:

#inhalt {height: 100px;}  /*für IE*/
html>body #inhalt {       /*für andere Browser zurücksetzen*/
   height: auto
}

Browser Bugs

Box Model Bug

IE 5 / 5.5

Standard: Elementbreite = width + paddings + margins + borders IE: Elementbreite = width + margin

Wenn also eine width und borders bzw. paddings angegeben sind werden die Boxen im IE 5 und 5.5 zu klein weil die paddings und borders nicht dazu gezählt werden. Lösung:

1. Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
2. Box Model Hack / Kind Hack

Kommentar Hack

Anwendung: vor IE/Mac verstecken z.B. bei 3px Bug der nur in Win Versionen auftaucht.

Beispiel (in Kombination mit * Hack)

/* 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 */

Inline Padding Bug

Horizontales Padding und Margin funktioniert bei Inline-Elementen im IE nur wenn eine Höhe angegeben ist. Dann kann es allerdings zu anderen Seiteneffekten kommen.

Lösung Höhe mit Kind Selektor Hack setzen.

3px Bug bei Bildern

Oft taucht beim IE im Zusammenhang mit floatenden Elementen eine Lücke unterhalb oder links rechts eines Bildes auf. Selbst eine Höhe für das Div hilft nichts.

Lösungsansätze: negatives padding für (Win IEs) overflow: hidden;