html - 元素渲染和间距不一致

Question

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

在图片中，有几列被向上拖动了大约 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>

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

Answer 1

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

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

到那时，您也可以从 .tile 中删除负值 margin-right 和 margin-bottom .