Differenza di rendering del browser tra DOCTYPE rigidi/di transizione

Question

Mi sono imbattuto in un "problema" qualche tempo fa che non ho mai raggiunto. Spero che qualcuno possa far luce su di esso. Ciò che causa alcuni browser (Chrome, Opera e Safari) per renderizzare una pagina in modo diverso quando cambio DOCTYPE da strict a transitional. So che la causa generale di questa è la modalità dei quirks che viene attivata, ma sia l'XHTML che i CSS per entrambi i file vengono convalidati in base al validatore w3c.

Posso solo supporre che questi browser utilizzino fogli di stile interni diversi per i due DOCTYPE, ma non hanno una vera idea del motivo per cui lo farebbero. Speravo solo che qualcuno potesse confermare perché questo accade.

La differenza che può essere vista è lo spazio tra la parte inferiore dell'immagine di intestazione e il bordo della barra dei menu. Nei browser sopra menzionati non c'è spazio tra i due quando si usa un DOCTYPE transitorio, ma c'è quando si usa strict (in IE e FF il divario è presente su entrambi). Alla fine ho capito che aggiungendo display:block al tag img si interrompe il divario che appare in tutti i casi (che era il mio obiettivo).

transitional example, strict example

Answer 1

Sembrerebbe che di default nella modalità 'strict' un'immagine sia visualizzata come un elemento in linea. Gli elementi in linea hanno uno spazio in basso per tenere conto dei caratteri del discender come g o q. Poiché un'immagine non ha caratteri di discendenza, questo è stato considerato uno strano comportamento che ha portato all'introduzione della modalità "quasi rigida". Nella modalità 'quasi rigida' tutti i tag img vengono visualizzati come display: block anziché inline. Ulteriori dettagli possono essere trovati here.

Il pezzo finale del puzzle è che tutti i browser moderni eseguono il rendering di pagine con un DOCTYPE rigoroso in modalità 'strict' e pagine con un DOCTYPE transitorio in modalità 'quasi rigida'. Maggiori dettagli possono essere trovati here.

Mille grazie a Moses e Riley, alcune delle informazioni fornite mi hanno aiutato a trovare la risposta.

Answer 2

non mi capiscono veramente questo me stesso capriccio. Penso che abbia a che fare con lo spazio bianco. In modalità strane, lo spazio bianco è più indulgente. Tuttavia, negli standard, lo spazio bianco può causare problemi.

Ad esempio, nel tuo esempio, hai una bella sorgente abbellita che è facilmente leggibile. La rimozione dello spazio bianco e delle interruzioni di riga tra contenitori ed elementi ti consentirà di rimuovere il divario in alcuni browser (credo FF). Per risolvere il problema in IE, è necessario aggiungere l'altezza della riga: 0; all'elemento che contiene l'immagine (in questo caso l'ancora contenente o il tag link).

Si dovrebbe inoltre notare, se vi preoccupate per IE6 a tutti, che, avendo ciascuno dei vostri <li> 's sulla propria linea aggiungerà linee extra tra ogni elemento della lista se fusi.

Answer 3

Ci sono solo alcune differenze tra i DOCTYPES rigidi e transitori, nessuno dei quali lo spiega davvero. (nota, ho solo FF, IE installato quindi non riesco a vedere l'errore stesso).

Per quanto riguarda ciò che ha causato ciò, potrebbe trattarsi di browser con fogli di stile diversi per le diverse modalità di rendering. Tuttavia, penso che in realtà si limiti al fatto che il browser adotta diversi approcci per il rendering della pagina per ciascuna modalità Strict/Trans/Quirks/Frames. Mentre l'unica differenza documentata tra Strict e Trans è come gestire le immagini inline all'interno dei tavoli, i browser non devono rispettare le specifiche del W3C e possono fare tutto ciò che vogliono veramente, e questo tende a causare bug come quello che apparentemente hai appena trovato.