Perché non altezza pari a altezza all'interno di esso quando è DOCTYPE XHTML 1.0 Strict?

StackOverflow https://stackoverflow.com/questions/1450274

  •  11-09-2019
  •  | 
  •  

Domanda 

<!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

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 posso farlo funzionare con il DOCTYPE?

È stato utile?

Soluzione

Nota: questo probabilmente dipende dal browser
. Le dimensioni dell'elemento di blocco (td, div, ecc) se non specificato solo sarà grande come necessario, secondo lo spazio occupato dal suo contenuto. Se specificato, si cercherà di ampliare di conseguenza, eccezione se il contenuto è più grande, nel qual caso si espanderà se necessario.

Nel tuo esempio, la cella contiene un singolo carattere (lo spazio non-breaking), che prendono la dimensione della singola linea. Quindi, l'elemento di blocco deve essere di almeno 1 linea-altezza alto; esso non può assumere qualsiasi dimensione più piccola. Questo è il motivo per cui la vostra 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 di cui sopra non si applica.

Altri suggerimenti

Aggiungere un blocco di stile con questa regola 

td img {display: block;}

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

sfondo non è un attributo standard per gli elementi TD è la ragione. Invece utilizzare: 

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

Per quanto riguarda la vostra immagine di 1 pixel, Presumo che ciò è semplicemente quello di far apparire la cella di una tabella? Se è così, che non è il modo consigliato di farlo. È possibile farlo: 

table { empty-cells: show; }

in CSS, anche se non credo che IE6 supporta. Il modo più standard compliant è quello di utilizzare uno spazio unificatore: 

<td>&nbsp;</td>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top