Html 元素渲染和间距不一致

我最近开始为一个基于tiles的Javascript游戏创建一个简单的概念，但是当我定位tiles时，我发现显示有一个问题。

在图中，有两列在0.5px和1px左右向上拖动，这是非常不可取的

我曾在Chrome、Mozilla Firefox和Internet Explorer中测试过这一点，它们都无法对齐瓷砖：Chrome在垂直方向上有问题，Firefox和IE在水平方向上有问题

容器和平铺（容器中有200个）的CSS代码如下所示：

#container {
    position:absolute;
    width:100%;
    height:100%;
}

.tile {
    width:5%;
    padding-bottom:5%;
    display:inline-block;
    margin-right:-4px;
    margin-bottom:-4px;
    position:relative;
    background-size:100% auto;
    background-repeat:no-repeat;
}

编辑：HTML代码，按请求：

<div id="container">
    <div class="tile tile_0_0"></div>
    <div class="tile tile_1_0"></div>
    <div class="tile tile_2_0"></div>
    <div class="tile tile_3_0"></div>
    <div class="tile tile_4_0"></div>
    <div class="tile tile_5_0"></div>
    <div class="tile tile_6_0"></div>
    <div class="tile tile_7_0"></div>
    <div class="tile tile_8_0"></div>
    <div class="tile tile_9_0"></div>
    <div class="tile tile_10_0"></div>
    <div class="tile tile_11_0"></div>
    <div class="tile tile_12_0"></div>
    <div class="tile tile_13_0"></div>
    <div class="tile tile_14_0"></div>
    <div class="tile tile_15_0"></div>
    <div class="tile tile_16_0"></div>
    <div class="tile tile_17_0"></div>
    <div class="tile tile_18_0"></div>
    <div class="tile tile_19_0"></div>
    <div class="tile tile_0_1"></div>
    <div class="tile tile_1_1"></div>
    <div class="tile tile_2_1"></div>
    <div class="tile tile_3_1"></div>
    <div class="tile tile_4_1"></div>
    <div class="tile tile_5_1"></div>
    <div class="tile tile_6_1"></div>
    <div class="tile tile_7_1"></div>
    <div class="tile tile_8_1"></div>
    <div class="tile tile_9_1"></div>
    <div class="tile tile_10_1"></div>
    <div class="tile tile_11_1"></div>
    <div class="tile tile_12_1"></div>
    <div class="tile tile_13_1"></div>
    <div class="tile tile_14_1"></div>
    <div class="tile tile_15_1"></div>
    <div class="tile tile_16_1"></div>
    <div class="tile tile_17_1"></div>
    <div class="tile tile_18_1"></div>
    <div class="tile tile_19_1"></div>
    <!--Continues all the way to tile_19_9-->
</div>

---

非常感谢您在这个问题上提供的任何帮助。提前感谢。

如果没有代码的实时版本，很难判断，但您可以尝试添加

字体大小：0到
#容器

我提出这个问题的原因是，你的
.tile
是
内联块
，这意味着浏览器将把HTML源代码中它们之间的换行折叠成文本空间。（有关详细信息，请参阅。）

在这一点上，您可以从
.tile
中删除右侧
页边距的负数
和底部
。
您也可以添加HTML吗？还请显示javascript。这也可能在这里做些什么。添加了HTML。另外，javascript除了将背景图像设置为“url（graphics/tiles/wood.png）”之外什么也不做