Por altura não é igual a dentro altura dele quando DOCTYPE é XHTML 1.0 Strict?

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

  •  11-09-2019
  •  | 
  •  

Pergunta 

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

É possível verificá-la aqui: http://maishudi.com/tt2.html

Eu conheci ele é causado por DOCTYPE, porque excluir essa parte irá torná-lo normal:

http://maishudi.com/tt.html

Então, o que há de errado? Como posso fazê-lo funcionar com o DOCTYPE?

Foi útil?

Solução

Nota: isso provavelmente depende do navegador
. O tamanho do elemento de nível de bloqueio (td, div, etc), se não especificado só será tão grande quanto necessário, de acordo com o espaço ocupado pelo seu conteúdo. Se for especificado, ele irá tentar expandir em conformidade, exceto se o conteúdo é maior, caso em que ele irá se expandir conforme necessário.

No seu exemplo, a célula contém um único caractere (o espaço sem quebra), que ter o tamanho de uma única linha. Por isso, o elemento de bloqueio deve ser, pelo menos, uma linha de alta-altura; ele não pode assumir qualquer tamanho menor. É por isso que a sua declaração de altura foi ignorado.

Você pode querer usar este estilo: 

line-height: 1px;

Isso define o line-height para 1px. Line-height não é um elemento, então a regra acima não se aplica.

Outras dicas

Adicionar um bloco de estilo com esta regra 

td img {display: block;}

https://developer.mozilla.org/en/Images,_Tables, _and_Mysterious_Gaps para uma explicação completa.

fundo não é um atributo padrão para elementos TD é a razão. Em vez disso use: 

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

Quanto a sua imagem de pixel 1, presumo que isso é simplesmente fazer a célula da tabela aparecem? Se assim for, isso não é o caminho aconselhado de fazê-lo. Você pode fazer: 

table { empty-cells: show; }

em CSS, embora eu não acho que IE6 suporta esse. A maneira compatível com mais padrões é usar um espaço rígido: 

<td>&nbsp;</td>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top