Warum <td > Höhe nicht gleich <img > Höhe darin, wenn DOCTYPE XHTML 1.0 Streng ist?

<!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 ansehen: http://maishudi.com/tt2.html Warum <td > Höhe nicht gleich <img > Höhe darin, wenn DOCTYPE XHTML 1.0 Streng ist?

Ich kenne es von DOCTYPE verursacht wird, weil dieser Teil gelöscht wird es normal machen:

http://maishudi.com/tt.html

Also, was falsch ist, wie kann? Ich lasse es mit dem DOCTYPE arbeiten?

Quelle

2009-09-20 omg

Ich würde zuallererst empfehlen, XHTML1.0 doctype mit HTML4.01 strikt zu ersetzen (siehe http://www.webdevout.net/articles/beware-of-xhtml für, warum das eine gute Idee ist) – kangax

Oh ich kann nicht, ändern Doctype wird eine Menge anderer Probleme für mich jetzt verursachen. – omg

Ich würde empfehlen, weiterhin XHTML Strict zu verwenden. Strengere Anforderungen sind in jeder Form der Softwareentwicklung mit Ausnahme von HTML eine gute Sache. Das sagt viel von dem, was Programmierer im Allgemeinen an HTML denken und an die Kompetenz derjenigen, die dazu gezwungen sind, es zu schreiben. Was der Artikel von Kangax nicht sagt, ist, dass es absolut gültig ist, XHTML Strict als Text/HTML zu senden. Nur XHTML 1.1 benötigt den MIME-Typ application/xml + xhtml. –

Hinweis: Dies hängt wahrscheinlich vom Browser ab.
Die Größe des Block-Level-Elements (td, div, etc) ist, falls nicht angegeben, nur so groß wie nötig, abhängig vom Platz, den der Inhalt einnimmt. Wenn angegeben, wird es versuchen, entsprechend zu erweitern, außer, wenn der Inhalt größer ist, in diesem Fall wird es bei Bedarf erweitern.

In Ihrem Beispiel enthält die Zelle ein einzelnes Zeichen (das geschützte Leerzeichen), das die Größe einer einzelnen Zeile annimmt. Daher muss das Blockelement mindestens 1 Zeilenhöhe hoch sein; es kann keine kleinere Größe annehmen. Aus diesem Grund wurde Ihre Höhenangabe ignoriert.

Möglicherweise möchten Sie diesen Stil verwenden:

line-height: 1px;

Hier wird die Zeilenhöhe auf 1px. Zeilenhöhe ist kein Element, daher gilt die obige Regel nicht.

Quelle

2009-09-20 07:25:38 RichN

Funktioniert wie Charme! Aber können Sie erklären, warum die Höhe keinen Einfluss auf TD hat? – omg

Es basiert auf Browsern auch. Einige Browser erwarten Textinhalt innerhalb von Elementen. Dies kann auch mit divs passieren. –

Redigierte meine Antwort. – RichN

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

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

Wie für Ihr 1-Pixel-Bild, ich nehme an, dies einfach die Tabellenzelle erscheinen zu lassen ist? Wenn dies der Fall ist, ist das nicht die empfohlene Vorgehensweise. Sie können entweder:

table { empty-cells: show; }

in CSS, obwohl ich glaube nicht, IE6 unterstützt das. Der mehr standardkonforme Weg ist die Verwendung eines nicht brechenden Platzes:

<td>&nbsp;</td>

Quelle

2009-09-20 04:06:40 cletus

funktioniert nicht, können Sie es überprüfen http://maishudi.com/tt3.html – omg

einen Style-Block mit dieser Regel hinzufügen

td img {display: block;}

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

Quelle

2009-09-20 09:39:38 Alohci

Perfekt! Vielen Dank.... –

Warum <td > Höhe nicht gleich <img > Höhe darin, wenn DOCTYPE XHTML 1.0 Streng ist?

Antwort

Verwandte Themen