El tipo de documento HTML 4.01 Transicional hace casi estándar en los navegadores modo. El doctype HTML5 causa el modo Estándares.
Este artículo de Microsoft explica la diferencia: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29.
Se dice que para el modo casi estándar:
Los elementos en línea contribuyen a la línea de altura si y sólo si uno de los siguiente es cierto.
Si el elemento:
contiene caracteres de texto
tiene una anchura de una frontera distinta de cero
tiene un margen distinto de cero
Tiene un acolchado distinto de cero
tiene una imagen de fondo
Ha vertical-align establece en un valor distinto de la línea de base
Tenga en cuenta que un salto de línea no se considera un carácter de texto para esta definición a menos que sea el único contenido de un cuadro de línea. En ese caso, , la altura de la línea de línea sigue siendo la más alta en la parte superior de la caja en línea y más abajo en la parte inferior de la línea, independientemente de la altura de línea especificada.
Si un elemento img es el único contenido de una celda de tabla, la altura del cuadro de línea de la celda se ajusta a cero.
más crítico en su caso, significa que el cálculo de la altura de la línea que contiene la imagen no incluye el strut, un elemento en línea imaginaria que debe aumentar la altura de la línea con el valor de línea de altura el elemento h1.
Este jsfiddle muestra un verdadero elemento de span con un como contenido de texto real de pie en el puntal, y se puede ver que el diseño es el mismo tanto con un tipo de documento HTML 4.01 de Transición y un tipo de documento HTML 5.
Este jsfiddle muestra la misma idea, sólo que esta vez el puntal se fabrica usando CSS, así:
h1:before {
content: '\A0';
}
En el caso de la respuesta de khurram, lo que está haciendo es la reducción de la línea de altura de la h1 y por lo tanto, en modo estándar, la altura del puntal es menor que la altura de la imagen. Esto significa que la altura de la línea como un todo está determinada por la altura de la imagen, no por la altura del puntal. La altura de la imagen es la misma tanto en los estándares como en el modo casi estándar, así que de nuevo, no se ve una diferencia en el rendimiento entre los modos.
En cuanto a por qué configurar la altura de línea del h1 para que coincida con la altura de la imagen (25px) no funciona, pero establecerlo en 12px sí, eso es porque el puntal establece no solo una parte superior e inferior, sino también una línea de base para la línea. La línea base está un poco por encima de la parte inferior para permitir el descenso de texto, para texto de tamaño normal que suele ser de aproximadamente 3 px. La imagen por defecto se encuentra en la línea base, de modo que el espacio entre la línea de base y el fondo se agrega a la altura de la imagen para establecer la altura de la línea.
Esto se puede resolver moviendo la imagen fuera de la línea base, usando img { vertical-align: top }, que se muestra en este jsfiddle.Si modifica la altura de la línea h1 aquí, verá que los valores superiores a 25px aumentan el espaciado entre las líneas, pero los valores de 25px o menos no cambian ese espaciado.
Excelente respuesta, bien investigada, y aborda la raíz del problema. – ForOhFor
Lo he resuelto estableciendo el CSS de la imagen en "display: block;" ... sin embargo, en otros contextos esto puede no ser viable. – KnF