无论浏览器缩放比例如何，如何保持元素对齐？

Question

我有一个“绘制”网格的页面，如下所示：

它通过使用绝对定位的div来实现。每个网格的宽度为237x237像素，因此第一个网格将位于顶部：0; left：0; ，第二个网格将放在 top：0; left：237px; ，第三个网格将放在 top：0; left：474px; ，等等。

但是，当用户放大或缩小时（使用浏览器键 Ctrl + / Ctrl - ），盒子没有正确对齐。当页面的背景颜色渗透时，这很明显：

无论浏览器的缩放比例如何，保持盒子“并排”的最佳方法是什么？

---

P.S。这些盒子必须绝对定位，因为它们需要动态移动。

Answer 1

不同的浏览器以不同的方式围绕“像素百分比” - 请参阅Evenly distributed height of child elements with CSS

正如评论中所建议的那样，使用背景图像会有很大帮助 - 它应该由你调用的4个“方块”或网格组成，并在水平和垂直方向上重复。

以这种方式，您仍然可以将div保留为position: absolute并将其背景保持为透明 - 但是，如果在为其设置动画时需要显示切片背景，则可能必须将其设置为背景动画开始时的颜色，然后在动画结束后将其设置回透明 - 但为了实现这一点，我假设你正在移动一个灰色方块代替另一个灰色方块，而不是白色方块。

编辑后发表评论：

这将是非常棘手的，不同的浏览器提供不同级别的缩放，并且很难确定你的div的大小，在所有情况下都可以很好地缩小（没有任何“半像素”）。但是，只要功能不受影响，当放大/缩小内容时外观上的差异通常是非常可接受的，我希望情况确实如此！

作为最后一个想法，您可以尝试使用％定位而不是像素 - 这可能会在缩放时更好地适应，但我不能保证因为我没有测试它 - 但它可能值得尝试一下！祝你好运！