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

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

  •  11-09-2019
  •  | 
  •  

Вопрос 

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

Это было полезно?

Решение

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

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

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

line-height: 1px;

При этом высота строки устанавливается равной 1 пикселю.Высота строки не является элементом, поэтому приведенное выше правило не применяется.

Другие советы

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

td img {display: block;}

и увидеть https://developer.mozilla.org/en/Images ,_таблицы,_и_мистерические_гапсы для получения полного объяснения.

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

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

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

table { empty-cells: show; }

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

<td>&nbsp;</td>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top