Почему это так?
Понимание почему вещи происходят так, как они это делают в CSS, это не то, о чем беспокоятся большинство веб-дизайнеров или веб-авторов. Часто причина заключается во взаимодействии различных частей спецификации CSS. Вот почему производителям браузеров потребовалось так много времени, чтобы сделать это правильно, и поэтому, когда вы не используете DOCTYPE и, следовательно, получаете режим причуд, вы получаете поведение макета, которое иногда кажется более интуитивным, чем при использовании DOCTYPE для Режим получения стандартов, где строго соблюдаются правила CSS.
Авторам обычно достаточно знать , что что-то происходит, и что делать, когда это происходит. Больше из которых внизу этого ответа.
Однако причины можно найти в спецификации CSS 2.1 с некоторыми поисками.
Во-первых, некоторые определения, которые нам нужно понять:
Элементы уровня блока - это те элементы исходного документа, которые
визуально форматируются как блоки (например, абзацы). Следующие
значения свойства 'display' составляют элемент уровня блока: 'block',
'list-item' и 'table'.
...
Элементы встроенного уровня - это те элементы исходного документа, которые не образуют новых
блоки контента; контент распределяется по строкам (например, выделенные фрагменты текста
внутри абзаца, встроенных изображений и т. д.) ....
Встроенные блоки, которые не являются встроенными (например, заменены)
элементы встроенного уровня, элементы встроенного блока и встроенная таблица
элементы) называются атомными встроенными блоками, потому что они
участвовать в их контекстном форматировании в виде единого непрозрачного блока.
Затем нам также необходимо понять концепцию линейного блока :
В контексте встроенного форматирования поля располагаются горизонтально, один
за другим, начиная с верхней части содержащего блока.
Горизонтальные поля, границы и отступы соблюдаются между этими
коробки. ... Прямоугольная область, которая содержит коробки, которые образуют
строка называется строкой.
... Высота линейного блока определяется по правилам, приведенным в разделе Расчет высоты строки .
...
Строчные блоки создаются по мере необходимости для содержания содержимого на уровне
встроенный контекст форматирования. ...
Таким образом, <img> - это замененный встроенный элемент, который устанавливает блок встроенного уровня, который устанавливает линейный блок, который располагается в объекте контейнера блока, например <div> или <td>. Высота строки строки затем определяется с помощью этих вычислений высоты строки :
Как описано в разделе о контекстах встроенного форматирования, пользовательские агенты
перетекать встроенные блоки уровня в вертикальный набор линейных блоков.
Высота линейного бокса определяется следующим образом:
- Высчитывается высота каждого встроенного блока уровня в линейном блоке. Для замененных элементов, элементов inline-block и inline-table
элементы, это высота их поля поля; для встроенных ящиков,
это их «высота строки». (См. «Расчет высоты и полей»
а высота встраиваемых боксов в «Ведущие и наполовину ведущие».)
- Инлайн-боксы выровнены по вертикали в соответствии со свойством вертикального выравнивания. В случае, если они выровнены «сверху» или «снизу»,
они должны быть выровнены так, чтобы минимизировать высоту линейного блока. Если такой
ящики достаточно высокие, есть несколько решений и CSS 2.1 делает
не определять положение базовой линии линейного блока (то есть, положение
стойки, см. ниже).
- Высота линейного бокса - это расстояние между самой верхней коробкой и самой нижней коробкой.(Это включает в себя распорку, как объяснено в разделе «высота строки» ниже.)
При работе с шагами сама <img height="1"> заставляет высоту строки только один пиксельвысоко, так что оставляет распорка .Это описано в разделе, посвященном ведущим и наполовину ведущим:
...
В элементе контейнера блока, содержимое которого состоит из элементов встроенного уровня, 'line-height' определяет минимальную высоту линейных блоков внутри элемента.Минимальная высота состоит из минимальной высоты над базовой линией и минимальной глубины под ней, точно так же, как если бы каждый линейный блок начинался со встроенного блока нулевой ширины со свойствами шрифта и высоты строки элемента.Мы называем эту воображаемую коробку "стойкой"....
Высота и глубина шрифта над и под базовой линией предполагаются метриками, содержащимися в шрифте....
Так что у нас это есть.Строчное поле, созданное элементом <img>, имеет в начале воображаемое встроенное поле, высота которого определяется размером шрифта , в результате чего линейное поле становится достаточно высоким, чтобы содержать символэтот шрифт.
Можно ли избежать такого поведения?
Из приведенного выше объяснения доступны две опции:
Линейный блок создается из встроенного элемента <img>.Таким образом, если элемент изменен на элемент уровня блока, в нем нет ни строкового блока, ни проблем.
т.е. в CSS td img { display:block; }
Так как высота вызвана распоркой, которая зависит от размера шрифта, в этом месте также изменив размер шрифта на 0решает проблему.
то есть в CSS tr:nth-of-type(3) td { font-size:0px }
(Вы можете захотеть поместить класс на третий <tr> и использовать его вместо :nth-of-type(3) для совместимости с не CSS 3поддерживающие браузеры)
Что лучше: найдите способ заставить это работать в HTML 4.01 или изменить тип документа на более современный?
самый современный - <!DOCTYPE html>.Ваша страница будет работать точно так же, как и с <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, потому что обе они вызывают стандартный режим в браузерах.