Besondere Werte für Internet Explorer 5.x für Windows
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
In Internet Explorer 5.x für Windows sollen spezielle Werte für bestimmte Eigenschaften (zum Beispiel width) verwendet werden, um die Eigenheiten bei Microsofts Implementierung des Boxmodells auszugleichen.
Lösung
Definieren Sie zunächst die Werte, die in Internet Explorer 5.x für Windows benutzt werden. Danach setzen Sie den sogenannten Star HTML-Hack ein, um die für andere Browser korrekten Werte in das Stylesheet einzufügen:
div#content {
/* Wert für alle Browser */
width: 500px;
}
* html div#content {
/* Wert für alle IE-Browser */
width: 566px;
/* Wert nur für IE/Mac */
w\idth: 500px;
}Diskussion
Laut der CSS-Spezifikation bezieht sich die Eigenschaft width auf die Breite des Inhaltsbereichs einer Box. Die Breite von Innen- und Außenabständen sowie eines möglichen Rahmens ist hiervon ausdrücklich ausgenommen. So legt der folgende Code die Breite des Elements auf 500 Pixel fest:
div#content {
width: 500px;
padding: 33px;
margin: 50px;
background-color: #666;
}Wie in folgender Abbildung zu sehen ist, scheint die Box 566 Pixel breit zu sein. Die 66 zusätzlichen Pixel stammen von den zusätzlich zur Boxbreite hinzugefügten Innenabständen.
Abbildung: Das von Mozilla korrekt implementierte Boxmodell.
In Internet Explorer 5.x für Windows entspricht die Breite dagegen nicht dem in der Spezifikation definierten Wert. Stattdessen werden bei Microsoft auch Rahmen und Innenabstände zur Gesamtbreite addiert. Um die tatsächliche Breite des Inhaltsbereichs in IE 5.x zu berechnen, müssen Sie daher die Werte für Rahmen und Innenabstände von der angegebenen Gesamtbreite subtrahieren:
Wert der Eigenschaft width
– linker Rahmen – linker Innenabstand
– rechter Rahmen – rechter Innenabstand
= tatsächliche Breite von Microsofts Elementbox
Demnach beträgt die von Internet Explorer 5.x für Windows ermittelte Breite nur 434 Pixel (siehe nächste Abbildung):
500px – 33px – 33px = 434px
Der Unterschied zur ursprünglich definierten Breite des Inhaltsbereichs beträgt also 66 Pixel.
Abbildung: Die Implementierung des Boxmodells durch Internet Explorer 5.x für Windows.
Die fehlerhafte Darstellung des Boxmodells im Internet Explorer 5.x für Windows (und Internet Explorer 6 für Windows im Quirks-Modus) findet statt, wenn für ein Element Innenabstände und Rahmen definiert werden.
Der Star-HTML-Hack
Beim Star-HTML-Hack definiert die erste Regel die Werte für alle Browser.
div#content {
/* Wert für alle Browser */
width: 500px;
}
...Mit der zweiten Regel werden die Werte für Internet Explorer festgelegt. Der hier verwendete Selektor wählt das div-Element mit dem id-Attribut content aus. Das div-Element muss seinerseits vom Element html abstammen, das wiederum von einem beliebigen Element abstammen kann (*).
div#content {
/* Wert für alle Browser */
width: 500px;
}
* html div#content {
/* Wert für alle IE-Browser */
width: 566px;
...Eigentlich ist das Element html das Wurzelelement für alle folgenden Selektoren und kann daher kein Nachfahre irgendwelcher anderen Elemente sein. Standardkonforme Browser werden diese inkorrekte Schreibweise daher einfach ignorieren. Aufgrund eines Programmierfehlers akzeptiert Internet Explorer 5.x für Windows diese Schreibweise jedoch. Das können wir uns zunutze machen, um speziell für diesen Browser eigene Regeln zu definieren, die von anderen Browsern nicht "gesehen" werden. Aufgrund der Kaskadierung überschreibt die zweite Regel im Internet Explorer die erste Definition, und der Wert für die Breite des Elements wird von 500px auf 566px gesetzt.
Im letzten Schritt nehmen wir eine Korrektur für den Internet Explorer für Macintosh vor. Zwar handelt es sich auch hier um einen Browser der IE-Familie. Dennoch stellt dieser das Boxmodell korrekt dar. Wir brauchen also eine Methode, um die zuvor für alle IE-Browser geänderte Breite wieder zurückzusetzen.
Wir machen uns wiederum einen Programmierfehler zunutze, um dem Internet Explorer für Macintosh eine eigene Regel unterzuschieben:
div#content {
/* Wert für alle Browser */
width: 500px;
}
* html div#content {
/* Wert für alle IE-Browser */
width: 566px;
/* Wert nur für IE/Mac */
w\idth: 500px;
}Normalerweise wird der Backslash benutzt, um Sonderzeichen zu schützen (z.B. \O’Reilly). Obwohl \i kein in CSS gültiges Sonderzeichen ist, hält Internet Explorer für Windows es dafür und "übersieht" die Eigenschaft width. Internet Explorer für Macintosh handelt dagegen korrekt und ignoriert den Backslash einfach. Da wir diese Regel zuvor mit dem Star-HTML-Hack auf Internet Explorer im Allgemeinen beschränkt haben, können wir den Wert für IE/Mac korrrigieren.
Ein weiterer Ansatz: Tanteks Boxmodell-Hack
Tantek Çelik, ehemals Microsofts Abgesandter in den CSS- und HTML-Arbeitsgruppen des W3C, zeigte als Erster, wie man den "box model hack" (auch bekannt unter dem Namen "voice-family hack") benutzen konnte, um das Problem mit der falschen Interpretation des Boxmodells durch Internet Explorer 5.x für Windows zu lösen. Diese Methode funktioniert auch bei Internet Explorer 6 für Windows, wenn sich dieser im Quirks-Modus befindet, da in diesem Fall das gleiche (falsche) Boxmodell verwendet wird.
div#content {
/* Werte für IE/Win zuerst, danach zweimal die korrekten Werte für andere Browser */
background-color: red;
voice-family: "\"}\"";
voice-family: inherit;
background-color: green;
}
html>div#content
background-color: green;
}Da das Boxmodell eines der vorrangigsten Konzepte beim Webdesign mit CSS ist, sollte es eines der höchsten Ziele sein, möglichst alle Inkonsistenzen auszuräumen, die durch dieses Problem entstehen können.
Der "Boxmodell-Hack" nutzt einen Programmierfehler, um den Regelsatz vorzeitig zu beenden. Sämtliche Anweisungen, die nach der Eigenschaft voice-family kommen, werden dadurch von IE/Win 5.x ignoriert. Da nun andere Browser wie beispielsweise Opera 5 auf diesen Hack empfindlich reagieren können, sollten Sie die folgende CSS-Regel in Ihr Stylesheet einbauen:
html>div#content
background-color: green;
}Diese Regel, die auch als "Sei nett zu Opera"-Regel bekannt ist, verwendet einen Selektor für Kindelemente, um den Wert der Eigenschaft für Browser wie Opera 5 wieder zugänglich zu machen. Diese Browser haben eventuell Probleme mit dem "Boxmodell-Hack", können aber korrekt mit Selektoren für Kindelemente umgehen.
Siehe auch
- Die CSS 2.1-Spezifikation zu Informationen über die Eigenschaft width als Teil des Boxmodells,
- Box Model Hack für Tantek Çeliks Erklärungen zum "Boxmodell-Hack" (deutsche Übersetzung),
- die CSS 2.1-Spezifikation für Informationen über die Eigenschaft voice-family und
- eine aktualisierte Version der "Boxmodell-Hacks" und weitere Hintergrundinformationen.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln