Pourquoi hauteur ne correspond pas à hauteur à l'intérieur de celui-ci lorsque DOCTYPE est XHTML 1.0 Strict?

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

  •  11-09-2019
  •  | 
  •  

Question 

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

Peut vérifier ici: http://maishudi.com/tt2.html

Je connais il est causé par DOCTYPE, parce que la suppression de cette partie, il sera normal:

http://maishudi.com/tt.html

Alors qu'est-ce qui ne va pas? Comment puis-je le faire fonctionner avec le DOCTYPE?

Était-ce utile?

La solution

Note: cela dépend probablement du navigateur
. La taille de l'élément de niveau bloc (td, div, etc) si non spécifié ne sera aussi grand que nécessaire, selon l'espace pris par son contenu. Si cela est spécifié, il va essayer de développer en conséquence, sauf si le contenu est plus grand, auquel cas il augmentera si nécessaire.

Dans votre exemple, la cellule contient un seul caractère (l'espace insécable), qui prennent la taille de la ligne unique. Par conséquent, l'élément de bloc doit être au moins une ligne de hauteur élevée; il ne peut pas assumer une plus petite taille. Voilà pourquoi votre déclaration de hauteur a été ignorée.

Vous pouvez utiliser ce style: 

line-height: 1px;

Ceci définit la hauteur de ligne à 1px. Hauteur de ligne n'est pas un élément, de sorte que la règle ci-dessus ne s'applique pas.

Autres conseils

Ajoutez un bloc de style avec cette règle 

td img {display: block;}

voir https://developer.mozilla.org/en/Images,_Tables, _and_Mysterious_Gaps pour une explication complète.

fond n'est pas un attribut standard pour les éléments de TD est la raison. Au lieu d'utiliser: 

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

En ce qui concerne votre 1 image pixel, je suppose que cela est tout simplement de faire apparaître la cellule du tableau? Si oui, ce n'est pas ainsi conseillé de le faire. Vous pouvez faire: 

table { empty-cells: show; }

CSS bien que je ne pense pas que IE6 soutient que. La façon conforme plus de normes est d'utiliser un espace insécable: 

<td>&nbsp;</td>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top