Am bekanntesten ist der von Tantek Celik entwickelte Box Model Hack, mit dem ein Fehler des Internet Explorers (Version 5, 5.5 und unter Umständen auch 6 behoben werden kann.
Der Hack ist inzwischen weiterentwickelt worden zum modifizierten Box Model Hack:
Nach dem CSS Box Model bezieht sich die Eigenschaft width auf die Breite des Inhaltes einer Box border, margin und padding werden hinzugezählt. Im Gegensatz dazu betrachtet der Internet Explorer width als die Gesamtbreite des Elementes bis zu und noch einschließlich der Border.
Abhängig von der Doctype Dedaration eines HTML Dokuments schalten Browser in einen bestimmten Anzeigemodus.
Moderne Browser unterscheiden für die Anzeige von Webseiten einen StandardModus und einen Quirks Modus, in dem sie das fehlerhafte Verhalten alter 8rowser simulieren. Normalerweise wird der
Anzeigemodus über die Doctype Dedaration gesteuert, die am Anfang eines jeden HTML Dokumentes stehen sollte. Der Internet Explorer schaltet auf Grund eines Fehlers trotz standardgemäßer Doctype Declaration in den QuirksModus, wenn am Anfang eines XHTML ? Dokuments ein XML Prolog steht.
Mit folgender Eingabe :
#box { width: 100px; border: 10px; padding: 5px;}
erreichen Sie in CSS konformen Browser eine Boxbreite von 130 Pixel (100 px + 2*10 px + 2*5 px)
während der Internet Explorer die Box insgesamt nur 100 Pixel breit anlegt.
Der Box Model Hack nutzt einerseits die Tatsache, dass später notierte Anweisungen vorher notierte überschreiben, und bedient sich andererseits eines weiteren Fehlers im Internet Explorer.
#box { width: 100px; border: 10px; padding: 5px;}
html #box
width: 130px;
width: 100px;
Der Hack beginnt mit dem CSS Joker #dem Zeichen, das für ein beliebiges Elelement steht.
html #box bedeutet also ein beliebiges Element, welches vom Element html gefolgt wird, woraus das Element #box folgt. Da eine Webseite immer mit html beginnt, trifft diese Anweisung niemals zu die Anweisungen in den Klammern werden also nicht ausgeführt. Der Internet Explorer jedoch ignoriert das # und setzt die Boxbreite gemäß der ersten Zeile auf 130px passend für die Versionen 5x.
Die folgende Zeile wird auf Grund des enthaltenen \ nur vom Internet Explorer 6 interpretiert
und setzt die Breite wieder auf die richtigen 100 px.