Tankteks Box Model Hack
Wer sich einmal mit dem CSS Cascading Style Sheets:
Erweiterung von HTML, mit der man auf
einfache Weise seine Website designen kann. Box-Modell beschäftigt hat,
wird auf die vielen Darstellungsprobleme der verschiedenen Browser gestoßen sein, die Probleme mit dem Implementieren des CSS-Box-Modells haben.
Das Box Modell Problem
Gemäß des W3C-Standards sollen Außen- und Innenabstand sowie Rahmen an die Höhen- und Breitenangaben hinzugefügt werden. Hat man nun also eine Box mit width: 100px; definiert
und gibt dieser einen Rahmen von 10 Pixeln (border: 10px #000000 solid;), so ist sie nach W3C-Standard 120 Pixel breit. Der verfügbare Innenraum wäre also 100 Pixel.
Der Internet Explorer 5.xx (Mac), Internet Explorer 6.xx, Opera, Mozilla und Netscape 6 haben keine Probleme
mit der Implementierung des CSS Box Modelles. Einzig allein der Internet Explorer 5.xx (PC/Windows) hat Probleme
mit der Darstellung, denn dieser legt den Rahmen innen an. Das würde heißen, dass unsere 120 Pixel große Box nur 100 Pixel breit ist und der nutzbare
Innenraum beschränkt sich auf 80 Pixel.
Der Internet Explorer 6
Prinzipiell kann man sagen, dass der IE6 kein Problem mit dem Box Modell hat. Allerdings gibt es einige Faktoren, die das anders
aussehen lassen können.
Wenn keine Doctype-Angabe gemacht wurde, so verhält sich der IE6 wie sein Vorgänger IE5. Von daher ist die Angabe eines Doctypes enorm wichtig.
Desweiteren verhält er sich wie sein Vorgänger, wenn man ein XHTML-Dokument verwendet, welches mit UTF-8 kodiert ist (<?xml version="1.0" encoding="utf-8"?>).
Der Hack
Der Hack funktioniert über folgenden CSS-Code:
#ContentBox {
border: 10px solid black;
width: 120px;
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #ContentBox
{
width: 100px;
}
Wenn nun ein Browser auf den Quellcode trifft, der Probleme mit dem Box Modell hat und der CSS2-Selektoren nicht fehlerfrei interpretieren kann (z.B. IE5/Windows), wird dieser bei voice-family: "\"}\""; abbrechen
und eine Box erstellen mit width: 100px und einem 10 Pixel Rahmen.
Browser, die zwar das Box Modell richtig interpretieren können, aber mit CSS2-Selektoren nichts anzufangen wissen (z.B. IE6/Windows), brechen an oben genannter Stelle nicht ab und überschreiben den oberen width-Wert mit dem in der letzten Zeile.
Der CSS2-Selektor html>body #ContentBox{ width: 100px; } wird einfach ignoriert.
Für die Browser, die keine Probleme mit dem Box Modell haben und auch CSS2-Selektoren beherrschen, deren CSS-Parser dennoch Fehler (Bugs) enthält (z.B. Opera 5), ist die Zeile html>body #ContentBox{ width: 100px; } gedacht.
Die Zeilen voice-family: "\"}\""; und voice-family:inherit; bewirken nichts am Aussehen der Website. Sie sind nur ein "Hilfsmittel" für das Gelingen des Hacks.
Zurück
|
