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






Я знаю, что это может показаться плохим, но вам нужно убедиться, что между концом вашего тега <img> и началом конечного тега </td> нет пробелов.
то есть следующее будет представлять проблему:
<td>
<img src = "image.jpg"/>
</td>
И этого не будет:
<td><img src = "image.jpg"/></td>
Надеюсь, это поможет.
Обновлено: ОК, это вообще не было решением. дох!
Я не искал всего этого, но проблема кроется где-то в таблицах стилей.
Если вы скопируете только ее табличную часть, карта будет отображаться правильно.
Если вы удалите последний тег </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, либо попытайтесь удалить их по одному, чтобы увидеть, что вызывает проблему.
Я думаю, вам нужно использовать display: block на своих изображениях. Для изображений inline есть немного дополнительного места для межстрочного интервала.
Вы также можете настроить высоту строки элемента td:
td {
line-height: 0
}
это может представлять ту же / аналогичную проблему