CSS y el modelo de caja

Algo realmente frustrante para mí es cuando le digo a un elemento web que mida por ejemplo 200px, cargo la página, lo mido y resulta que al final da que mide 202 píxeles!!!... qué pasa????.... más frustrante es aún el hecho de que ese miemo elemento, cuando se mide en IE, mide 200, pero en el resto 202.

El quid de la cuestión, es que ese elemento tiene la propiedad border a 1px y que según el navegador y la versión, se considera que el borde está contado dentro del tamaño del elemento o no.

Bueno, pues aquí llega CSS3 al rescate (mareando aún más) con la definición del modelo de caja. Resulta que el consorcio W3C dice que el borde NO forma parte del tamaño del elemento, es decir, está por fuera, lo que hace que desde el momento que usas elementos con borde, se te va a freir espárragos cualquier diseño pixel perfect... o por ejemplo si usas 960gs con formularios y a algún input le pones propiedad de border para que quede más bonito... los diseños se descuadran, empiezas a hacer guarrerías para que quede como debe, etc...

Todo este cuadro, queda más claro explicado con un dibujo:

Como decía antes, con CSS3 al menos tenemos la opción de elegir cuál es el modelo de caja que nos va a descuadrar nuestro diseño (ya que por lo que he visto, según el que uses te arregla unas cosas y te descuadra otras y viceversa).

No hay más que asignar la propiedad box-sizing para que quede todo claro. Aquí están los dos posibles valores:

box-sizing: border-box;
box-sizing: content-box;
Como es lógico, no todo puede ser tan sencillo. Resulta que cada navegador interpreta la propiedad CSS a su manera, así que para que funcione, hay que añadir el tag específico de cada familia de navegador:

/* W3C */
box-sizing: border-box
box-sizing: content-box
/* for Safari & Google Chrome */
-webkit-box-sizing: border-box;
-webkit-box-sizing: content-box;
/* Mozilla */
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box; /* Este es específico de mozilla */
/* IE8 */
-ms-box-sizing: border-box;
-ms-box-sizing: content-box;

Y diréis... para qué sirve? pues fácil. A mí me ha salvado la vida con el estilado de formularios de modo que usando el modelo de border-box sobre los elementos de formularios, puedo usar bordes y 960gs sin morir en el intento simplemente añadiendo esta regla al CSS:

form, fieldset, input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; }