Diferencia de representación del navegador entre DOCTYPE estrictos/de transición

Question

Me encontré con un 'problema' hace algún tiempo que nunca llegué al fondo de. Con suerte, alguien puede iluminarlo. ¿Qué causa que ciertos navegadores (Chrome, Opera y Safari) presenten una página de manera diferente cuando cambio el DOCTYPE de estricto a transitorio? Sé que la causa general de esto es que se activa el modo peculiar, pero tanto el XHTML como el CSS de ambos archivos validan de acuerdo con el validador w3c.

Solo puedo suponer que estos navegadores usan diferentes hojas de estilo internas para los dos DOCTYPE, pero no tienen una idea real de por qué lo harían. Solo esperaba que alguien pudiera confirmar por qué sucede esto.

La diferencia que se puede ver es el espacio entre la parte inferior de la 'imagen del encabezado' y el borde de la barra de menú. En los navegadores antes mencionados no hay espacio entre los dos cuando se utiliza un DOCTYPE de transición, pero sí cuando se usa estricto (en IE y FF el espacio está presente en ambos). Eventualmente descubrí que agregar display:block a la etiqueta img evita que aparezca el espacio en todos los casos (que era mi objetivo).

transitional example, strict example

Answer 1

Parecería que por defecto en el modo 'estricto' una imagen se muestra como un elemento en línea. Los elementos en línea tienen un espacio en la parte inferior para tener en cuenta los caracteres descendentes, como g o q. Como una imagen no tendrá ningún carácter descendiente, se consideró un comportamiento extraño que condujo a la introducción del modo "casi estricto". En el modo "casi estricto", todas las etiquetas img se representan como display: block en lugar de en línea. Se pueden encontrar más detalles here.

La última pieza del rompecabezas es que todos los navegadores modernos renderizan páginas con un DOCTYPE estricto en modo 'estricto' y páginas con un DOCTYPE de transición en modo 'casi estricto'. Más detalles se pueden encontrar here.

Muchas gracias a Moses y Riley, parte de la información que proporcionaron me ayudó a encontrar la respuesta.

Answer 2

No entiendo realmente esta peculiaridad mí mismo. Creo que tiene que ver con el espacio en blanco. En el modo peculiar, el espacio en blanco es más indulgente. Sin embargo, en las normas, el espacio en blanco puede causar problemas.

Por ejemplo, en su ejemplo, tiene una bonita fuente embellecida que es fácil de leer. Eliminar el espacio en blanco y los saltos de línea entre contenedores y elementos le permitirá eliminar el espacio en algunos navegadores (en mi opinión, FF). Para solucionarlo en IE, deberá agregar line-height: 0; al elemento que contiene la imagen (en este caso, el ancla que lo contiene o la etiqueta de enlace).

También debe tener en cuenta, si le importa IE6 en absoluto, que tener cada uno de sus <li> en su propia línea agregará líneas adicionales entre cada elemento de la lista cuando se procesa.

Answer 3

Existen solo algunas diferencias entre los DOCTYPES Estricto y Transitorio, ninguno de los cuales realmente explica esto. (Nota: solo tengo FF, IE instalado, así que no puedo ver el error).

En cuanto a qué causó esto, podría ser un caso de que el navegador tenga hojas de estilo diferentes para los diferentes modos de representación. Sin embargo, creo que realmente se reduce al hecho de que el navegador adopta diferentes enfoques sobre la forma en que representa la página para cada modo Estricto/Trans/Quirks/Marcos. Si bien la única diferencia documentada entre Estricto y Trans es cómo manejar las imágenes en línea dentro de las tablas, los navegadores no tienen que cumplir con las especificaciones W3C y pueden hacer lo que realmente quieran, y esto suele causar errores como el que acabas de encontrar.