Почему высота <td>не равна высоте <img>внутри него, когда DOCTYPE равен XHTML 1.0 Strict? - PullRequest
Новая
       23

Почему высота <td>не равна высоте <img>внутри него, когда DOCTYPE равен XHTML 1.0 Strict?

7 голосов
/ 20 сентября 2009 
<!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>

Можете проверить это здесь: http://maishudi.com/tt2.html

Я знал, что это вызвано DOCTYPE, потому что удаление этой части сделает его нормальным:

http://maishudi.com/tt.html

Так что не так? Как я могу заставить его работать с DOCTYPE?

Ответы [ 3 ]

13 голосов
/ 20 сентября 2009

Примечание: это, вероятно, зависит от браузера.
Размер элемента уровня блока (td, div и т. Д.), Если он не указан, будет только настолько большим, насколько это необходимо, в соответствии с пространством, занимаемым его содержимым. Если указано, он будет пытаться соответственно расширяться, за исключением , если содержимое больше, и в этом случае оно будет расширяться по мере необходимости.

В вашем примере ячейка содержит один символ (неразрывный пробел), который принимает размер одной строки. Следовательно, блочный элемент должен быть как минимум на 1 высоту строки; это не может принять меньший размер. Вот почему ваша декларация высоты была проигнорирована.

Вы можете использовать этот стиль: 

line-height: 1px;

Это устанавливает высоту строки в 1px. Высота строки не является элементом, поэтому указанное выше правило не применяется.

11 голосов
/ 20 сентября 2009

Добавить блок стиля с этим правилом 

td img {display: block;}

и полное объяснение см. https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps.

0 голосов
/ 20 сентября 2009

фон не является стандартным атрибутом для элементов TD является причиной. Вместо этого используйте: 

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

Что касается вашего 1-пиксельного изображения, я предполагаю, что это просто для того, чтобы ячейка таблицы появилась? Если так, то это не рекомендуемый способ сделать это. Вы можете сделать: 

table { empty-cells: show; }

в CSS, хотя я не думаю, что IE6 поддерживает это. Более совместимый со стандартами способ заключается в использовании неразрывного пробела: 

<td>&nbsp;</td>
...