Question

我最近开始为基于瓷砖的Javascript游戏创建一个简单的概念，但是当我定位瓷砖时，我发现显示器有问题。 http://i.gyazo.com/8328507c64b4254a6271172892ca3f92.png

在图片中，有几列被拖动到0.5px和1px左右，这是非常不受欢迎的。

我已经在Chrome，Mozilla Firefox和Internet Explorer中对此进行了测试，他们都无法对齐磁贴：Chrome在垂直方面存在问题，Firefox和IE水平存在问题。

容器和磁贴的CSS代码（容器中有200个）如下：

#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>

非常感谢有关此问题的任何帮助。提前谢谢。

Answer 1

如果没有可用的代码的实时版本很难分辨，但您可以尝试的一件事是将font-size: 0;添加到#container。

我提出这个问题的原因是.tile是inline-block，这意味着浏览器会将HTML源代码中的换行符折叠为文本空间。（有关详细信息，请参阅this article about space between inline-block elements。）

此时，您也可以从margin-right中删除否定的margin-bottom和.tile。

元素渲染和间距不一致

1 个答案: