2010-06-01 4 views
8

qualcuno può spiegare a me perché avere una doctype diaggiunge spazi bianchi?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

e

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

rendere il seguente blocco in modo diverso in Firefox?

<table style="border-collapse:collapse; margin:0; padding:0;"> 
    <tr> 
     <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td> 
    </tr> 
</table> 

usando 'di transizione', non c'è spazio bianco sotto l'immagine, usando 'Strict' che ci sia!

Seconda domanda, utilizzando rigoroso, è possibile rimuovere tutti questi spazi bianchi?

+0

C'è qualche spazio bianco nascosto nel tuo file? (Come gli spazi alla fine di una riga?) – John

+0

senza spazi vuoti nascosti. – pstanton

risposta

14

Come si può vedere in this table, la prima modalità di occultamento Doctype triggers in tutti i browser, lo second attiverà la modalità standard.

Il resto di questa storia è continuata a Images, Tables, and Mysterious Gaps:

Setting images to be blocks

La prima scelta, e uno che lavoro per la maggior parte graficamente intense disegni, è quello di convertire l'immagine da essere un elemento in linea per un elemento a livello di blocco . Effettuare ciò e non genera più una casella di riga e quindi il problema scompare-- presupponendo che l'immagine sia l'unica cosa che occupa quella cella di tabella. Nel caso più semplice , potremmo aggiungere uno stile come questo:

td img {display: block;} 
+0

Ho appena trovato anche quell'articolo. +1 per essere più veloce. :) – edl

+0

quindi la soluzione è aggiungere 'display: block;' sull'immagine ... modifica la risposta e darò il segno di spunta! – pstanton

1

Il mio sospetto è che lo spazio bianco all'interno del markup (ad es., Le newline e le schede che rendono il codice tabella piacevolmente leggibile) siano errati. Ho riscontrato problemi simili in precedenza, in cui lo spazio nel markup risultava in fastidioso spazio sullo schermo, anche dove sembra non avere importanza (ad es. Tra i tag <li>).

Provare a ridurre il markup della tabella su un'unica linea lunga.

+0

no, ho provato questo senza spazi bianchi di sorta.è come se il renderer aggiungesse lo spazio bianco quando si utilizza il rigoroso doctype. – pstanton

0

Non so perché lo spazio si verifica. Per quanto riguarda una correzione, se non ti dispiace impostare esplicitamente un'altezza per la cella della tabella, puoi aggiungere display: block; e altezza: 60 px; ai tuoi stili di Td.

0

Il primo DOCTYPE renderà la tua pagina in almost standards mode: modalità

"Quasi standard" rendere le partite "standard" modalità in tutti i dettagli tranne uno. La disposizione delle immagini all'interno delle celle di una tabella viene gestita allo stesso modo della modalità "quirks".

Il secondo DOCTYPE renderizza la pagina in modalità standard.