| CSS: Box Model Hack |
| Geschrieben von MK | |
| 07.08.2005 | |
|
Die Browserversionen des MS Internet Explorers 5.x interpretieren das Box-Modell-Konzept von CSS 1 falsch. 1. TAN-Hack (selfhtml) #bereich { width: 200px; padding: 20px; border: 20px solid #66A; } * html #bereich { /* nur fuer Internet Explorer */ width: 280px; /* Version 5.x */ w\idth: 200px; /* Version 6 */ } Dabei wird das "*"-Tag ausgenutzt, welches nur vom MSIE interpretiert wird. 2. Tantek-Hack (selfhtml) #bereich { padding: 20px; border: 20px solid #66A; width: 280px; voice-family: "\"}\""; voice-family: inherit; width: 200px; Ab "voice ..." ignoriert der MSIE 5.x nachfolgende Deklarationenen. Für standardkonforme Browser wird in der letzten Zeile die eigentlich gewünschte Breite festgelegt. 3. Trenton-Hack (evolt.org) #box { width: 280px; } #box div { border: 20px solid #66A; padding: 20px; } Im HTML-Bereich wird Folgendes eingefügt: Hier wird im Individualformat "#box" die gewünschte Breite deklariert. Mit einer Verschachtelung "#box div" werden Rahmendicke und Innenabstand festgelegt. Dieser Hack ist vielleicht nicht ganz so elegant, da er der sogenannten "div-Suppe" Vorschub leistet. Hinweis: Um Fehlinterpretationen durch den MSIE 6 zu vermeiden, sollte dieser durch eine standardkonforme DTD stets in den Standard Mode versetzt werden. Weitere Informationen dazu auf selfhtml. |