CSS - Hacks: Unterschied zwischen den Versionen
| Zeile 1: | Zeile 1: | ||
| − | == Sternchen Hack == | + | == Hacks == |
| − | '''IE 5 | + | |
| + | === Sternchen Hack == | ||
| + | '''Anwendung:''' Anweisungen nur für IE 5 und 6 z.B. | ||
| + | |||
* html {...} /*das sehen nur IEs*/ | * html {...} /*das sehen nur IEs*/ | ||
| − | |||
| − | |||
Zukunftssicher: ? | Zukunftssicher: ? | ||
| − | == Box Model Hack / Tantek Hack == | + | === Box Model Hack / Tantek Hack === |
'''IE 5 und IE 5.5''' | '''IE 5 und IE 5.5''' | ||
| − | + | '''Anwendung:''' Box Model Fehler von IE 5/5.5 korrigieren | |
| + | |||
| + | '''Beispiel:''' | ||
#kasten{width: 360px;} | #kasten{width: 360px;} | ||
* html #kasten{ /*Das beachten nur IEs*/ | * html #kasten{ /*Das beachten nur IEs*/ | ||
| Zeile 16: | Zeile 19: | ||
w\idth: 360px; /* das sieht nur der IE 6 */ | w\idth: 360px; /* das sieht nur der IE 6 */ | ||
} | } | ||
| − | |||
| − | |||
Zukunftssicher: ja | Zukunftssicher: ja | ||
| − | == Kind Selektor Hack == | + | === Kind Selektor Hack === |
IE versteht den KindSelektor nicht. Z.B. | IE versteht den KindSelektor nicht. Z.B. | ||
body > p | body > p | ||
| + | |||
| + | '''Anwendung:''' Höhe nur für IE setzen (IE braucht Höhenangaben z.B. wg. Inline Padding Bug.) | ||
'''Beispiel:''' | '''Beispiel:''' | ||
| Zeile 30: | Zeile 33: | ||
height: auto | height: auto | ||
} | } | ||
| − | |||
==Browser Bugs== | ==Browser Bugs== | ||
| + | |||
===Box Model Bug=== | ===Box Model Bug=== | ||
IE 5 / 5.5 | IE 5 / 5.5 | ||
Version vom 23. Juni 2006, 09:43 Uhr
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:
- Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
- 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.
