Dlaczego wysokość nie równa się <img > wysokość wewnątrz, gdy DOCTYPE jest XHTML 1.0 Strict?

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

Można to sprawdzić tutaj: http://maishudi.com/tt2.html Dlaczego wysokość nie równa się <img > wysokość wewnątrz, gdy DOCTYPE jest XHTML 1.0 Strict?

Znam to spowodowane DOCTYPE, ponieważ usunięcie tej części będzie to normalny:

http://maishudi.com/tt.html

Więc co jest nie tak jaki sposób? Czy mogę pracować z DOCTYPE?

Źródło

2009-09-20 omg

Przede wszystkim zalecam zastąpienie dokumentu XHTML1.0 ścisłym kodem HTML4.01 (patrz http://www.webdevout.net/articles/beware-of-xhtml, dlaczego jest to dobry pomysł) – kangax

Och, nie mogę, zmiana doktryny sprawi mi teraz wiele innych kłopotów. – omg

Polecam nadal używać XHTML Strict. Bardziej rygorystyczne wymagania są dobre w absolutnie każdej formie tworzenia oprogramowania, z wyjątkiem HTML. To mówi dużo o tym, co programiści na ogół myślą o HTML i kompetencjach tych, którzy zostali zmuszeni do napisania go. To, o czym nie mówi artykuł z kangax, to to, że jest całkowicie poprawne wysyłanie XHTML Strict jako text/html. Tylko XHTML 1.1 wymaga typu mime application/xml + xhtml. –

Uwaga: prawdopodobnie zależy to od przeglądarki.
Rozmiar elementu blokowego (td, div, itp.), Jeśli nie jest określony, będzie tylko tak duży, jak jest to potrzebne, w zależności od miejsca zajmowanego przez jego zawartość. Jeśli zostanie podana, spróbuje odpowiednio się rozszerzyć, pod warunkiem, że zawartość jest większa, z wyjątkiem , w takim przypadku w razie potrzeby rozwinie się.

W twoim przykładzie komórka zawiera pojedynczy znak (spacje nierozdzielające), które przyjmują rozmiar pojedynczej linii. W związku z tym element blokowy musi mieć wysokość co najmniej 1 wysokości linii; nie może przyjmować żadnego mniejszego rozmiaru. Dlatego Twoja deklaracja wysokości została zignorowana.

Możesz użyć tego stylu:

line-height: 1px;

To ustawia line-height do 1px. Wysokość linii nie jest elementem, więc powyższa reguła nie ma zastosowania.

Źródło

2009-09-20 07:25:38 RichN

Działa jak urok! Ale czy możesz wyjaśnić, dlaczego wysokość nie ma wpływu na td? – omg

Opiera się również na przeglądarkach. Niektóre przeglądarki oczekują treści tekstowej w obrębie elementów. Może się to również zdarzyć w przypadku elementów div. –

Zmieniono moją odpowiedź. – RichN

tło nie jest standardowym atrybutem dla elementów TD jest przyczyną. Zamiast tego użyj:

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

Jeśli chodzi o obraz o 1 piksel, zakładam, że po prostu pojawi się komórka tabeli? Jeśli tak, nie jest to zalecany sposób robienia tego. Możesz wykonać:

table { empty-cells: show; }

w CSS, chociaż nie sądzę, że IE6 to obsługuje. Im bardziej zgodny jest ze standardami jest użycie przestrzeni nierozdzielającej:

<td>&nbsp;</td>

Źródło

2009-09-20 04:06:40 cletus

nie działa, możesz to sprawdzić http://maishudi.com/tt3.html – omg

Dodaj blok w stylu tej zasady

td img {display: block;}

i zobaczyć https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps dla pełnego wyjaśnienia.

Źródło

2009-09-20 09:39:38 Alohci

Idealny! Dziękuję Ci.... –

Dlaczego wysokość nie równa się <img > wysokość wewnątrz, gdy DOCTYPE jest XHTML 1.0 Strict?

Odpowiedz

Powiązane problemy