表格单元格比它们应该的尺寸要大

Question

我为一个游戏创建了一个地图系统，该系统运行的原理是从瓦片绘制地图的图片。虽然这样做有很多原因，但我不会在这里深入解释，如果你真的想知道，我相信你可以找到如何联系我的方式 ;)

我已经发布了最新版本，所以您可以看到问题所在和源代码。问题出现在上面两个瓦片和下面两个瓦片之间的线条，我无法弄清楚为什么会出现这种情况，希望得到任何帮助。

在源代码中有一个名为“stackoverflow”的标记，如果您在查看源代码时搜索“stackoverflow”，它应该会带您到相关的表格处。

我还上传了一个问题图片。

- Teifion

Answer 1

我认为您需要在图像上使用 display: block。当图像是 inline 时，会为行间距留下一些额外的空间。

- Daniel James

Answer 2

您也可以调整td元素的行高：

td {
    line-height: 0
}

- GateKiller

Answer 3

我知道这听起来可能不好，但你需要确保在<img>标签结束和结束</td>标签开始之间没有空格。

例如，以下内容将出现问题：

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

而这个则不会：

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

希望这可以帮到您。 编辑：好的，那不是解决方案。天啊！

- samjudson

---

这可能会出现相同/类似的问题。 - Mark W

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 开始尝试，要么逐一删除它们，看看哪一个导致了问题。

- Biri