Testování problematického zobrazení mezer pod obrázkem v tabulce

(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)

Ukázky zobrazení obrázku v tabulce s DTD typu Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

Pokud je ukončovací element buňky </td> za obrázkem odřádkován, v Exploreru 6 a 7 je opět pod obrázkem mezera, v ostatních prohlížečích již ale také!

<table> <tr> <td> <img src="grafika.gif" alt="obrázek" /> </td> </tr> </table>

Pokud není ukončovací element buňky za obrázkem odřádkován, v Exploreru 6 a 7 mezera pod obrázkem není jako s DTD Transitional, v ostatních prohlížečích ale mezera je! Je tedy zřejmé, že i IE8, Firefox, Opera a Safari chápou s DTD Strict obrázky již také správně jako řádkové prvky. Explorer 6 a 7 zobrazuje mezery bez ohledu na použité DTD, ale podle toho, zda odřádkujeme ukončovací element buňky </td> nebo nikoliv, jako řádkový prvek ho ale chápe vždy.

<table> <tr> <td> <img src="grafika.gif" alt="obrázek" /></td> </tr> </table>
Pro zajímavost uvádím i ukázku zobrazení obrázku v elementu <div>, kde je problém mezer naprosto stejný jako v buňce tabulky (pokud je ale v </div> použita také vlastnost height, mezery zobrazeny v IE8, Firefoxu, Opeře a Safari nejsou, pro buňku tabulky a Explorer 6, 7 to však neplatí).

<div style="border: solid 5px red; width:190px">   <img src="grafika.gif" alt="obrázek" /> </div>

<div style="border: solid 5px red; width:190px; height:190px">   <img src="grafika.gif" alt="obrázek" /> </div>

:: zpět

pepe © 2007