Табличные ячейки больше, чем они предназначены

Я создал систему карт для игры, которая работает по принципу рисования изображения карты из плиток. Для этого есть много причин, по которым я не буду входить сюда, но если вы действительно хотите знать, тогда я уверен, что вы можете узнать, как со мной связаться;)

У меня сделана последняя версия в прямом эфире, чтобы вы могли точно видеть, где находится проблема, и источник. Проблема заключается в линии между двумя верхними плитами и нижними 2 плитами, я не могу понять, почему так прошло, и любая помощь будет оценена.

В источнике есть маркер, называемый "stackoverflow", если вы ищете "stackoverflow" при просмотре источника, то он должен отвезти вас в таблицу.

Я также добавил образ проблемы.

Ответ 1

Думаю, вам нужно использовать display: block на ваших изображениях. Если у изображений inline есть немного дополнительного пространства для межстрочного интервала.

Ответ 2

Вы также можете отрегулировать высоту строки элемента td:

td {
    line-height: 0
}

Ответ 3

Я знаю, что это может показаться плохим, но вам нужно убедиться, что между тегом тега <img> и началом тега </td> нет пробелов.

то есть. Ниже приведена проблема:

<td>
 <img src="image.jpg"/>
</td>

И это не будет:

<td><img src="image.jpg"/></td>

Надеюсь, что это поможет.

Изменить: ОК, это не было решением. DOH!

Ответ 4

Я не искал все это, но проблема лежит где-то в таблицах стилей.

Если вы скопируете только часть таблицы, она правильно отображает карту.

Если вы удалите последний тег </span> из этой части, он также работает (однако страница смешана):

<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">

<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">

Итак, попробуйте сначала с помощью css или попытайтесь удалить один за другим их, чтобы увидеть, что вызывает проблему.