Dette er en test af Tantek Çeliks "Box Model Hack" der tager højde for en bug i IE5.x der gør at css box modellen opfattes ukorrekt.

Se: www.tantek.com/CSS/Examples/boxmodelhack.html

Iflg. korrekt css angiver "width" og "height" kun den indre bredde/højde, dvs. minus padding, border og margin, der altså skal lægges til for at få den samlede bredde/højde. IE5 opfatter i stedet "width" og "height" som summen af disse mål. En boks med width:200px, padding:4px, border:4px og margin:4px fylder altså 224 i bredden i IE6 men kun 200px i IE5. Den gule boks oven for er angivet med width:200px hvor den grønne er korrigeret med hacken, sådan at der først angives en width/height svarende til de samlede mål (altså for IE5), og derefter de korrekte mål (for IE6 og andre). Derfor vil den gule og den grønne boks ikke flugte vandret og lodret i IE5, men de vil gøre det i IE6.

"Selve hacket går jo ud på at IE5 har [endnu] en bug der gør at den holder op med at læse efter: voice-family:"\"}\""; og derigennem skjuler man alt [for IE5] hvad der står efter dette i den erklæring." (Rune Glerup på dk.edb.internet.webdesign.html d.29/9-2002 kl.02.00). — Man skal derfor sørge for at alt som IE5 skal bruge (dvs. alt undtagen den korrekte widht og height), er angivet inden hacken.

I browsere der fortolker CSS korrekt, sker der blot det at de width og height værdier der er angivet efter hacken, erstatter de forkerte.

Bemærk! Heller ikke Internet Explorer version 6 er fuldstændig helbredt. Også i denne browser medregnes målene for border i boksens højde/bredde, men dog ikke margin og padding.

Her er koden:

<style type="text/css">
.nohack { /* Den gule boks */
  width:200px;
  height:100px;
  background-color:#ffcc00;
  padding:4px;
  border: 4px solid blue;
  margin:4px;
  }
.hack { /* Den grønne boks */
  width:224px;
  height:124px;
  background-color:#ccff00;
  padding:4px;
  border: 4px solid blue;
  margin:4px;
  voice-family:"\"}\"";
  voice-family:inherit;
  width:200px;
  height:100px;
  }
</style>

-------

<div class="nohack">&nbsp;</div><br />
<div class="hack">&nbsp;</div>