Perché l'altezza non è uguale a <img > altezza al suo interno quando DOCTYPE è XHTML 1.0 Strict?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
</head> 
<body> 

<table width="100%" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="right" colspan="5"> 
      <span class="validationInline">*</span> 
      <span class="hint">Required fields</span> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="5" background="http://media.monster.com.hk/bgr_8.gif"> 
      <img src="/static/cleardot.gif" height="1" width="1" /> 
     </td> 
    </tr> 
</table> 

</body> 
</html>

Può verificarlo qui: http://maishudi.com/tt2.html Perché l'altezza non è uguale a <img > altezza al suo interno quando DOCTYPE è XHTML 1.0 Strict?

ho conosciuto è causata da DOCTYPE, perché l'eliminazione di quella parte sarà più normale:

http://maishudi.com/tt.html

Allora, cosa c'è che non va Come può? Lo faccio funzionare con il DOCTYPE?

fonte

2009-09-20 omg

Vorrei, prima di tutto, raccomandare di sostituire XHTML1.0 doctype con HTML4.01 rigoroso (vedere http://www.webdevout.net/articles/beware-of-xhtml perché è una buona idea) – kangax

Oh non posso, cambiare doctype causerà molti altri problemi per me ora. – omg

Si consiglia di continuare a utilizzare XHTML Strict. Requisiti più severi sono una cosa buona in ogni forma di sviluppo del software, tranne HTML. Questo dice molto di ciò che i programmatori generalmente pensano dell'HTML e della competenza di coloro che sono costretti a scriverlo. Ciò che l'articolo di kangax non dice è che è perfettamente valido inviare XHTML Strict come text/html. Solo XHTML 1.1 richiede il tipo mime application/xml + xhtml. –

Nota: questo probabilmente dipende dal browser.
La dimensione dell'elemento a livello di blocco (td, div, ecc.), Se non specificato, sarà grande solo se necessario, in base allo spazio occupato dal suo contenuto. Se specificato, tenterà di espandere di conseguenza, eccetto se il contenuto è più grande, nel qual caso si espanderà se necessario.

Nel tuo esempio, la cella contiene un singolo carattere (lo spazio non interrotto), che prende la dimensione della singola riga. Quindi, l'elemento del blocco deve essere almeno 1 alto in altezza; non può assumere dimensioni più piccole. Questo è il motivo per cui la tua dichiarazione di altezza è stata ignorata.

Si consiglia di usare questo stile:

line-height: 1px;

Imposta il line-height a 1px. Line-height non è un elemento, quindi la regola sopra non si applica.

fonte

2009-09-20 07:25:38 RichN

Funziona come un incantesimo! Ma puoi spiegare perché l'altezza non ha alcun effetto su td? – omg

Si basa anche sui browser. Alcuni browser prevedono contenuti di testo all'interno di elementi. Questo può succedere anche con le div. –

Modificato la mia risposta. – RichN

background non è un attributo standard per gli elementi TD è la ragione. Utilizzare invece:

style="background: url(/path/to/image.png);"

Per quanto riguarda l'immagine a 1 pixel, presumo che questo sia semplicemente per far apparire la cella della tabella? Se è così, non è il modo consigliato di farlo. È possibile:

table { empty-cells: show; }

in CSS, anche se non credo che IE6 lo supporti. Il modo più conforme agli standard è quello di utilizzare uno spazio non interruttivo:

<td>&nbsp;</td>

fonte

2009-09-20 04:06:40 cletus

non funziona, puoi verificarlo http://maishudi.com/tt3.html – omg

Aggiungi un blocco stile con questa regola

td img {display: block;}

e vedere https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps per una spiegazione completa.

fonte

2009-09-20 09:39:38 Alohci

Perfetto! Grazie.... –

Perché l'altezza non è uguale a <img > altezza al suo interno quando DOCTYPE è XHTML 1.0 Strict?

risposta

Problemi correlati