html - 表格单元格比预期的要大

Question

我已经为一个游戏创建了一个地图系统，该游戏的运行原理是从瓷砖中绘制地图图片。这有很多原因，我不会在这里讨论，但如果你真的想知道，那么我相信你可以找到如何联系我；）

我已经发布了最新版本，因此您可以准确地看到问题所在和根源。问题是顶部 2 个瓷砖和底部 2 个瓷砖之间的界线，我不知道为什么它会这样消失，任何帮助将不胜感激。

源代码中有一个名为“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，要么尝试一个接一个地删除它们，看看这是导致问题的原因。