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

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.