如何保持元素对齐，不受浏览器缩放比例的影响？

Question

3

我有一个页面可以像下面看到的那样“绘制”网格：

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

然而，当用户缩放浏览器（使用浏览器键Ctrl + / Ctrl -）时，这些方框并未正确对齐。当页面的背景色渗透时，这是明显的：

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

附：这些框必须被绝对定位，因为它们需要被动态移动。

- Pacerier

1

好问题。所有浏览器都表现出这种方式吗？ - lorenzo-s

为什么不在body或container div上放置一个重复的背景图像（1个深色正方形+1个浅色正方形）？此外，我们可以看到您的一些源代码吗？ - Lowkase

@Diodeus 有没有什么方法可以“反制”（禁用）浏览器缩放？基本上我希望页面始终以100％的缩放比例显示。 - Pacerier

@lorenzo-s 在Chrome和Safari上测试过，但并非所有浏览器都能这样工作。 - Pacerier

您无法禁用浏览器缩放，就像您无法禁用“返回”按钮一样。除非您的设计完全基于相对单位，否则浏览器缩放将继续存在问题。 - Diodeus - James MacFarlane

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luca · Accepted Answer

不同的浏览器以不同的方式四舍五入“像素的％” - 请参见使用CSS均匀分布子元素的高度中的评论。

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

这样，您仍然可以保持

标签的position: absolute属性，并将其背景设置为透明 - 然而，如果需要在动画过程中显示平铺背景，则可能必须在动画开始时将其设置为背景颜色，然后在动画结束后将其设置回透明 - 但是为了使其工作，我假设您正在移动一个灰色正方形代替另一个灰色正方形，白色正方形也是一样的。

根据您的评论进行编辑：

这将非常棘手，不同的浏览器提供不同级别的缩放，很难找到一个大小，使您的

标签在所有情况下都可以很好地缩小（没有任何“半像素”）。但是，只要功能不受影响，在缩放时外观的轻微差异通常是可以接受的，我希望这是情况！

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