Haz que el ancho total de un div sea el mismo tanto en el modo estricto como en el modo peculiar

Considera lo siguiente

Test

Si esto se envía a una página que IE8 representa en modo estricto (o si carga en Firefox, etc.), entonces el interior del div (el área blanca donde se realiza la prueba) tendrá 150 px de ancho pero el div en total será 50 + 150 + 50 = 250 px de ancho (representando el borde)

Si esto se procesa en el modo Quirks, solo tendrá 50 + 50 + 50 = 150px de ancho.

La diferencia está en Quirks el ancho incluye cualquier borde como se explica aquí

Si está colocando un fragmento html en una página y no sabe de antemano qué modo se utilizará, ¿hay algún truco confiable (css / javascript u otro) que garantice que el div tenga las mismas dimensiones generales en ambos estrictos / Modo Quirks en todos los navegadores principales (IE6 / 7/8, Firefox, Opera, Chrome)?

Creo que lo he descifrado (probado en IE 6/7/8 peculiaridades y modo estricto y FF3.5)

El modo Quriks / Strict difiere en el ancho de un div solo si hay relleno / bordes involucrados.

Así que cree un div externo para establecer el ancho, luego un div interno con el borde.

El div interno está restringido por el ancho del div externo, y ambos modos peculiares / estrictos tendrán el mismo tamaño.

es decir

 
Test

se convierte

 
Test

Para eso está el atributo de box-sizing . Vea esta guía .

La única manera confiable en que puedo pensar es omitir algunos (o muchos) estilos de CSS: fronteras para uno. Si te apegas a lo básico (divs con colores de fondo, por ejemplo) y no jugueteas demasiado con los paddings y los márgenes, deberías poder obtener un resultado bastante consistente.

En una nota al margen: ya es bastante difícil lograr que los navegadores estén de acuerdo sobre cómo se ven las cosas en un solo tipo de documento, incluso si es estricto.