Inutile de vouloir refaire ce qui a déjà était trés bien fait par d'autres, je vous renverrai donc à l'excellent article de Laurent Denis qui a été publié sur le site de l'Open Web Group pour ce qui concerne l'explication du Model Box en CSS.

En voici d'ailleurs une autre illustration en 3D beaucoup plus parlante.

Donc en gros pour résumer, le model box en CSS est un problème d'interprétation des dimensions d'éléments de type "bloc" (comme la balise <div> par exemple).
Il y a 2 types d'interprétation, celle du W3C et celle de Microsoft.
Ce qui revient à dire que lors de mises en pages CSS de vos éléments, le rendu ne sera pas le même suivant le navigateur utilisé car les dimensions de boîtes ne seront pas calculées de la même manière.

Le hack

Heureusement il existe des "combines" ("hack") pour pallier à ce problème du à Internet Explorer. En effet le parseur CSS de ce dernier ( IE 5.*) est lui même un peu "bugué" et ne comprend pas certaines syntaxes CSS.

La solution consiste donc à définir des dimensions "spéciales" pour IE (model box IE) et ensuite à redéfinir, grace à une syntaxe que IE ne comprendra pas, les dimensions "normales" (model box W3C). Ces dernières seront ignorées par IE mais surchargeront les premières valeurs définies, on peut donc grâce à cette méthode définir dans une même déclaration CSS, deux types de dimensions en fonction du model box utilisé.

Explications

Jetez un oeil sur cette déclaration CSS :

voice-family: "\"}\"";

Celà signifie en CSS que la propriété "voice-family" à pour valeur "}" (les antislashs échappent les guillemets intérieurs).
Seulement IE ne comprend pas cette syntaxe et l'interprête comme une simple accolade fermante }, pour lui celà signifie donc que la déclaration CSS est finie et il n'interprête plus ce qui vient ensuite.

La propriété voice-family permet de choisir parmi des familles de voix. La comparaison avec font-family peut-être faite ici.
En fait, il s'agit de spécifier un style de voix. Cette propriété n'est actuellement pas ou trés peu utilisé étant donné qu'elle est destiné à des médias du type synthétiseur vocaux ou télévision.
On peut donc l'utiliser sans crainte sur le web et elle convient parfaitement à l'usage que l'on veut en faire ici.

Exemple

Ainsi grâce à cette astuce nous pouvons faire des déclarations CSS de ce type :

#maboite { 
	width: 220px;
	border: 10px solid #555;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 200px;
}

La largeur est tout d'abord déclarée à 220px pour IE, puis grâce au fameux "hack", elle est ensuite redéfinie à 200px pour les autres navigateurs respectant le model box standard.

Conclusion

Voici donc une petite astuce bien pratique lorsqu'on est confronté à ce type de problèmes en CSS. Il existe une autre astuce que j'utilise aussi, je ne sais plus où je l'ai trouvé ni si elle est connue mais en tout cas elle marche très bien.
Elle consiste à redéfinir dans une syntaxe que seul IE comprend toute une déclartion CSS, exemple :

#maboite { 
	width: 200px;	
}
 
* html #maboite {
	width: 220px;
}