Jens Oliver Meiert

Boxmodell-Hack (Tantek Çelik)

Originalversion:
http://www.tantek.com/­CSS/Examples/boxmodelhack.html
√úbersetzer:
Jens Oliver Meiert, meiert.com
Datum der √úbersetzung:
10. Juli 2004 (‚ÜĽ 7. Februar 2007)

Bei diesem Dokument handelt es sich um eine deutsche √úbersetzung, die urheberrechtlich gesch√ľtzt ist; bitte beachten Sie auch etwaige Hinweise des Originaldokuments. Das in allen Zweifelsf√§llen ma√ügebliche Dokument ist das englische Original.

Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an den √úbersetzer. Kommentare des √úbersetzers, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht des √úbersetzers. Sie sind kein Bestandteil des Ursprungsdokuments.

Boxmodell-Hack

Boxtest

Hier ist ein Beispiel-div mit der Klasse boxtest.

Es hat einen Rahmen von 20 Pixeln, 30 Pixel Innenabstand und 300 Pixel Breite.

div.boxtest {
  border: 20px solid;
  padding: 30px;
  background: #ffc;
  width: 300px;
}

Die Gesamtbreite inklusive Rahmen und Innenabstand sollte 400 Pixel betragen.

20 + 30 + 300 + 30 + 20 = 400

User-Agents (zum Beispiel Browser), die das CSS-1-Boxmodell durch das Platzieren von Rahmen und Innenabstand innerhalb der definierten Breite fehlinterpretieren, werden eine Gesamtbreite von 300 Pixeln und eine Breite des Inhalts von 200 Pixeln errechnen.

300 ‚Äď 20 ‚Äď 30 ‚Äď 30 ‚Äď 20 = 200

Die roten und blauen Balken verdeutlichen den Unterschied. Dieses div (einschließlich seines Rahmens) sollte so breit sein wie der blaue Balken.

 
 

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:

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.

¬ĽCreative Commons¬ę-Lizenz. Diese Seite unterliegt einer Creative Commons-Lizenz.