Warum Höhe nicht gleich Höhe in der es, wenn DOCTYPE ist XHTML 1.0 Strict?

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

  •  11-09-2019
  •  | 
  •  

Frage 

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

Kann es hier: http://maishudi.com/tt2.html

Ich habe es durch DOCTYPE verursacht bekannt, weil dieser Teil gelöscht wird es normal machen:

http://maishudi.com/tt.html

Also, was ist los? Wie kann ich es mit dem DOCTYPE funktioniert?

War es hilfreich?

Lösung

Hinweis: Dies hängt wahrscheinlich von dem Browser
. Die Größe des Blockelementes (td, div, usw.), wenn nicht nur so groß wie nötig festgelegt wird, entsprechend den Raum, der durch seinen Inhalt entnommen. Wenn angegeben, werden versuchen, sie entsprechend zu erweitern, außer , wenn der Inhalt größer ist, wobei in diesem Fall wird es erweitern, falls erforderlich.

In Ihrem Beispiel enthält die Zelle ein einzelnes Zeichen (der non-breaking Raum), die die Größe der einzelnen Linie nehmen. Daher muss das Blockelement mindestens 1 Zeilenhöhe hoch sein; es kann keine kleinere Größe annehmen. Deshalb ist Ihre Höhe Erklärung ignoriert wurde.

Sie können diesen Stil verwenden: 

line-height: 1px;

Hier wird die Zeilenhöhe auf 1px. Line-height ist kein Element, so dass die obige Regel gilt nicht.

Andere Tipps

Fügen Sie einen Style-Block mit dieser Regel 

td img {display: block;}

und finden Sie unter https://developer.mozilla.org/en/Images,_Tables, _and_Mysterious_Gaps für eine vollständige Erklärung.

Hintergrund ist kein Standard-Attribut für TD-Elemente ist der Grund. Stattdessen verwenden: 

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

Wie für Ihre 1-Pixel-Bild, gehe ich davon aus das ist einfach die Tabellenzelle erscheinen zu lassen? Wenn ja, das ist nicht die Art und Weise beraten, es zu tun. Sie können entweder tun: 

table { empty-cells: show; }

in CSS obwohl ich glaube nicht, dass IE6, dass unterstützt. Je mehr der gängigen Standard-Weg ist ein Geschütztes Leerzeichen zu verwenden: 

<td>&nbsp;</td>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top