Content
Hier ist ein Beispiel-div mit der Klasse content.
Es sollte nahezu identisch formatiert sein wie das boxtest-div:
div.content {
border: 20px solid;
padding: 30px;
background: #ffc;
}mit einer wichtigen Ergänzung – es gibt eine zweite Regel, die einen CSS-Parsing-Bug im IE 5/5.5 unter Windows ausnutzt, um eine Breite zuzuweisen, die anschließend überschrieben wird.
div.content {
width: 400px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px;
}Dieses div-Element (einschließlich seines Rahmens) sollte genauso breit sein wie der blaue Balken, selbst im IE 5/5.5 unter Windows.
Zusätzlich fügen wir nun noch eine weitere Regel hinzu, die unmittelbar der obigen folgt, um User-Agents zu bedienen, die CSS-2-Selektoren und das CSS-Boxmodell unterstützen, aber demselben Parsing-Bug unterliegen wie der IE 5/5.5 (siehe oben). Ich nenne sie die »Sei nett zu Opera 5«-Regel. Stellen Sie sicher, dass Sie kein Leerzeichen um das > stehenlassen.
html>body .content {
width: 300px;
}Bemerken Sie bitte, dass User-Agents, die dem Parsing-Bug (illustriert durch den "\"}\""-Wert) unterliegen, möglicherweise die nächste Regel ignorieren; deshalb hilft die »Sei nett zu Opera 5«-Regel diesen fehlgeleiteten Parsern, den »Faden« wieder aufzunehmen.
Um nachzuweisen, dass das CSS-Parsen solcher User-Agents an dieser Stelle wieder fortgeführt wird, füge ich eine weitere Regel hinzu, und zwar unmittelbar hinter der vorherigen (nur um dies zu verdeutlichen).
p.ruletest {
color: blue;
}Dieser Absatz besitzt das Attribut class="ruletest" und sollte deshalb in blau dargestellt werden. Falls er rot ist, greift eine zuvor definierte Regel, die durch die spätere richtigerweise hätte überschrieben werden sollen. Beachten Sie, dass diese letzte Regel unnötig ist und hier nur dem Zweck dient, nachzuweisen, dass die oben dargestellten Regeln des Boxmodell-Hacks hinter sich korrekt »aufräumen«.
Ergänzungen
Vermeiden Sie den unnötigen ?xml-Prolog
4. April 2002: Prerit Bhakta merkte an, dass unter Verwendung des ?xml-Prologs
<?xml version="1.0"?>der IE 6 unter Windows das »quirky« Boxmodell verwendet (also in den Kompatibilitätsmodus springt).
Da der »?xml«-Prolog unnötig ist, empfehle ich, ihn einfach wegzulassen.
Validieren Sie Stylesheets als medienunabhängige Dateien
3. September 2002: Jonathan Horn merkte an, dass der W3C-CSS-Validierer Fehlermeldungen zurückgibt, wenn die voice-family-Eigenschaft in einem screen-Stylesheet verwendet wird.
Wie ich in den Beiträgen zu Dave Sheas »mezzoblue« anmerkte, ist dies ein Fehler im W3C-CSS-Validierer. Der Validierer sollte eine Warnung ausgeben (und keinen Fehler), wenn CSS-Eigenschaften, die bei einem bestimmten Medientyp nicht unterstützt werden, verwendet werden, und dies wurde auch so an das W3C weitergegeben:
- https://lists.w3.org/Archives/Public/
www-validator-css/2001Jul/0086.html - https://lists.w3.org/Archives/Public/
www-validator-css/2001Oct/0070.html
Mein Rat: Validieren Sie Ihr Stylesheet erst medienunabhängig, damit Sie sicher sein können, valides CSS zu gebrauchen, und importieren Sie es dann gegebenenfalls in einem medienabhängigen Element.
Übersetzungen
15. September 2002: Christophe Ducamp lieferte eine französische Übersetzung, Bidouillage de Boîtes.
10. Februar 2004: Maurício »Maujor« Samy Silva lieferte eine portugiesische Übersetzung, Corte Do Modelo Da Caixa.
19. Februar 2004: Alex Kachanov lieferte eine russische Übersetzung, Трюк с блочной моделью CSS.
4. Juni 2004: Vakorin Nikita lieferte ebenfalls eine russische Übersetzung, Способ обхода коробочной модели.
4. Juli 2004: Hermann Kaser lieferte eine spanische Übersetzung, Hack para el modelo de cajas en CSS.
2. August 2004: Daniel Torres Burriel lieferte ebenfalls eine spanische Übersetzung, Corte Del Modelo De la Caja.
12. Februar 2005: Marcel Feenstra lieferte eine holländische Übersetzung, Box Model Hack.
24. Februar 2005: Mehmet Doğan lieferte eine türkische Übersetzung, Kutucuk Modeli.
