Il doctype HTML 4.01 Transitional provoca modalità quasi standard nei browser. Il doctype HTML5 causa la modalità Standard.
Questo articolo Microsoft spiega la differenza: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29.
Si dice che per la modalità Almost Standards:
elementi in linea contribuiscono alla linea di altezza se e solo se uno dei seguenti è vera.
Se l'elemento:
Contiene caratteri di testo
Ha larghezza di un confine diverso da zero
ha un margine diverso da zero
Ha un'imbottitura diversa da zero
Ha un'immagine di sfondo
Ha vertical-align impostato su un valore diverso al basale
Nota che un'interruzione di riga non è considerato un carattere di testo per questa definizione meno che non sia l'unico contenuto del una casella di riga. In tal caso, l'altezza del riquadro di riga rimane la parte superiore superiore della scatola in linea e la casella in basso più in basso della linea sulla linea, indipendentemente dall'altezza della linea specificata da .
Se un elemento img è l'unico contenuto di una cella di tabella, la casella di riga altezza dell'altezza del riquadro di riga della cella viene regolata su zero.
La maggior parte critica nel tuo caso, vuol dire che il calcolo della altezza della linea che contiene l'immagine non include il strut, un elemento in linea immaginaria che dovrebbe aumentare l'altezza della linea al valore di line-height l'elemento h1.
Questo jsfiddle mostra un vero e proprio elemento span con una come il contenuto del testo vero e proprio in piedi per il montante, e si può vedere che il layout è lo stesso sia con un HTML 4.01 doctype di transizione e un DOCTYPE HTML5.
Questa jsfiddle mostra la stessa idea, solo che questa volta il puntone è fabbricato utilizzando i CSS, in questo modo:
h1:before {
content: '\A0';
}
Nel caso di risposta di Khurram, quello che sta facendo è la riduzione del line-height del h1 e quindi, in modalità standard, l'altezza del montante deve essere inferiore all'altezza dell'immagine. Ciò significa che l'altezza della linea nel suo complesso è determinata dall'altezza dell'immagine, non dall'altezza del montante. L'altezza dell'immagine è la stessa sia per gli standard che per la modalità quasi standard, quindi, di nuovo, non si vede una differenza nel rendering tra le modalità.
Per quanto riguarda il motivo per cui l'altezza della linea dello h1 corrisponde all'altezza dell'immagine (25px) non funziona, ma impostarla su 12px, poiché il puntone stabilisce non solo una parte superiore e una parte inferiore, ma anche una linea di base per la linea. La linea di base è un po 'sopra il fondo per consentire discendenti di testo, per il testo di dimensioni normali che di solito è di circa 3px. L'immagine di default si trova sulla linea di base in modo che lo spazio tra la linea di base e il fondo sia aggiunto all'altezza dell'immagine per stabilire l'altezza della linea.
Questo problema può essere risolto spostando l'immagine dalla linea di base, utilizzando img { vertical-align: top }, che è mostrato in questo jsfiddle.Se armeggiate con l'altezza della linea h1 qui, vedrete che i valori superiori a 25px aumentano la spaziatura tra le linee, ma i valori di 25px o meno non cambiano tale spaziatura.
Ottima risposta, ben studiata, e affronta la radice del problema. – ForOhFor
L'ho risolto impostando il css dell'immagine su "display: block;" ... tuttavia in altri contesti potrebbe non essere possibile. – KnF