Browsers die de CSS box model verkeerd verstaan plaatsen de border en padding atributen binnenin de effectieve breedte, moeilijke uitleg, maar ik zal het even verduidelijken aan de hand van een paar voorbeelden.

Tantek hack

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

Volgens de regels zou dit nu een box moeten zijn van 400 px breed = 20+30+300+30+20 = 400

Voorbeeld van het boxmodel

Browsers die deze CSS niet juist begrijpen (Internet Explorer) plaatsen de 20px boord (x2) en de 30px padding (x2) binnenin de actuele width van 300px, wat als resultaat heeft dat de width nu nog maar 200px breed is = 300-20-30-30-20 = 200

Oplossing is de hack

Om dit op te lossen moeten we Internet Explorer iets gaan wijsmaken, namelijk dat de box eigenlijk 400px breed moet zijn (dus met border en padding 300+20+30+20+30), en daarnaa geven we de echte waarde voor alle andere browsers die wel correct met de box model kunnen omgaan.

Dus eerst bepalen we wat de kleur en of de border en padding moet zijn :

div.content {
border:20px solid;
padding:30px;
background: #ffc;
}

Dan leiden we Internet Explorer om de tuin door eerste de foutieve waarde op te geven (400) en sluiten zogezegd af met “\”}\”", en daarna geven we de echte waarde op :

div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

Optioneel

Ten slotte voegen we nog de Be nice to Opera rule toe:

html>body .content {
width:300px;
}