¿Cómo puedo hacer que el modo Estándar funcione tan bien como el modo peculiar?

El siguiente HTML funciona muy bien para mí en FireFox o IE7 / 8 (con o sin la etiqueta de estilo)

    Input.quirks { margin: 1px 0px 1px 0px; border: solid black 1px; }    Should work in Quirks Mode 


Sin embargo, me han dicho que la ausencia de un DocType en la parte superior de dicho HTML está causando que ambos navegadores funcionen en modo “Quirks”.

Me han dicho que esto es malo.

He probado varios DocTypes pero no he encontrado una combinación de DocType / HTML que produzca una representación correcta en ambos navegadores.

Cualquier otra cosa que no sea el modo “Quirks” hace que los navegadores reaccionen de manera diferente al bash de establecer el ancho de un cuadro de texto. Esto parece llevar a una posición en la que puedo corregir mis instrucciones para FF o IE y de repente la otra fallará.

Algunos detalles …

1.> El objective aquí es que las 3 filas deben tener el mismo ancho exactamente cuando se representan en cada navegador. No es necesario que los anchos representados sean los mismos en todos los navegadores, simplemente que aparecen correctamente justificados / alineados dentro de cada navegador.

2.> La imagen a la que se hace referencia es una imagen espaciadora de 3 píxeles de ancho y 1 de alto (una alternativa a esto también sería buena)

3.> No quiero introducir tablas si es posible.

Parece que el modo Quirks es el único modo que es consistente en todos los navegadores. Sin embargo, me preocupa que la versión final de IE8 o incluso en algún futuro navegador, el modo de caprichos no sea el predeterminado.

Qué tengo que hacer ? ¿Cómo especificar un DocType (y tal vez alterar mi html) que creará una apariencia coherente en los navegadores?

La principal diferencia entre “Quirks” y el modo de “Cumplimiento de estándares” es un “modelo de caja” diferente, que ofrece diferentes formas de calcular los tamaños según la configuración de ancho / alto, relleno, margen y borde. En el modo de cumplimiento estándar, el ancho y la altura efectivos de un cuadro se calculan agregando todos estos parámetros (por favor, busque en la web más detalles).

Entonces, como especifica un borde de 1px, sus primeros campos de entrada tendrán un ancho de 302px (300px + 2 * 1px para el borde izquierdo y derecho). La inconsistencia entre FF e IE que mencionó puede ser causada por diferentes “valores predeterminados” para la configuración de “relleno”. Acabo de probar su código con un DOCTYPE y sin relleno para los campos de entrada, ambos navegadores lo hicieron de la misma manera.

  

Ahora, para las imágenes espaciadoras: no las uses. No los necesitas. Simplemente use un margen derecho de “3px” para los campos de entrada para el espacio.

 input.quirks { margin: 1px 3px 1px 0px; /* 3px right margin */ border: solid black 1px; padding: 0px; /* so that IE and FF use the same padding */ } 

Luego, haga los cálculos para determinar la configuración correcta de “ancho” para que la sum de todos los anchos (incluyendo el relleno, el borde y el margen) en cada fila sea igual, por ejemplo:

 300px + 5px = 305px 145px + 150px + 2*5px = 305px 90px + 100px + 100px + 3*5px = 305px 

Observe que “5px” consiste en el margen derecho de 3px y 2 veces el borde (1px).

Hay que ir Si desea utilizar un relleno diferente para una apariencia más agradable, ¡simplemente inclúyalo en sus cálculos!

Este es un excelente artículo sobre cómo obtener su DOCTYPE correctamente:
http://www.alistapart.com/stories/doctype/

Debido a que su problema fue causado principalmente por diferentes valores predeterminados en IE y Firefox, es posible que le interese una hoja de estilo Restablecer CSS , que incluye valores para elementos como el relleno, eliminando los valores predeterminados de cada navegador para que todos se procesen de manera similar.