不一致的元素渲染和間距

我最近開始爲基於瓦片的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>

不限非常感謝有關這個問題的幫助。提前致謝。

來源

2015-04-22 Energyxxer

你可以添加HTML嗎？ – Chris

也請顯示javascript。這也可能在這裏做點事情。 – nomistic

添加了HTML。此外，JavaScript什麼都不做，只是將背景圖像設置爲「url（graphics/tiles/wood.png）」 – Energyxxer

如果沒有可用的代碼的實時版本很難說，但有一點你可能會嘗試將font-size: 0;添加到#container。

我提出這個問題的原因是，你的.tile s是inline-block，這意味着瀏覽器將把HTML源代碼中的新行壓縮到文本空間中。（有關詳細信息，請參閱this article about space between inline-block elements）

在這一點上，你可以去除消極從你.tile小號margin-right和margin-bottom爲好。

來源

2015-04-23 00:35:08 mjswensen

不一致的元素渲染和間距

回答

相關問題