Ячейки таблицы больше, чем предполагалось

Question

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

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

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

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

Answer 1

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

Answer 2

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

td {
    line-height: 0
}

Answer 3

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

то естьСледующее представит проблему:

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

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

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

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

Редактировать:Хорошо, это было совсем не решение.да!

Answer 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, либо попытайтесь удалить их один за другим, чтобы увидеть, что вызывает проблему.