缩放时图像切片之间的空白区域

Question

我的网站包含图表。此图表由按行和列排列的9x9磁贴组成。如果一切顺利，结果如下：

在上图中，图像紧密相连，显示为一个。 但是，当用户放大时，出于某种原因会出现黑线和白线。

在IE11上，随机位置有黑线和白线。

在Chrome中，甚至会出现一种网格。

实际上，所有图像都是从单个png文件加载的。 每个单元格的宽度和高度限制为31x31像素。

该表由一堆<div>个html节点构成。

<div class="my-table">
  <div class="my-row">
    <div class="my-cell my-cell-empty-center"/> 
    <!-- repeated 9 times -->
  </div>
  <!-- repeated 9 times -->
</div>

CSS删除所有类型的边框和间距。

.my-table{
  display:table;
  width:auto;
  border:0px;
  border-spacing:0px;
  padding: 0px;
  border-collapse: collapse;
}

.my-row{
  display:table-row;
  width:auto;
  height: auto;
  clear:both;
}

.my-cell{
  float:left;/*fix for buggy browsers*/
  display:table-column;
  width:31px;
  height:31px;
  background: url(sprites.png) no-repeat;
}

然后有一些CSS来选择图像的正确区域。 每个细胞的这部分可能不同。

.my-cell-black{background-position: 0 -93px ;}
.my-cell-white{background-position: -62px -93px ;}
.my-cell-empty-center{background-position: -31px -31px ;}
.my-cell-empty-dot{background-position: -31px -93px ;}
.my-cell-empty-left{background-position: 0 -31px ;}
.my-cell-empty-top{background-position: -31px 0 ;}
.my-cell-empty-right{background-position: -62px -31px ;}
.my-cell-empty-down{background-position: -31px -62px ;}

知道出了什么问题吗？

Answer 1

当用户放大或缩小时，将根据缩放的百分比计算值。由于这通常不会产生整数值，因此像素值将被舍入，这可能会导致截图中显示的1px行，因为所有舍入值的总和不等于这些元素的容器总和。你无法真正做很多事情。