我有一个“绘制”网格的页面，如下所示：
它通过使用绝对定位的 div 来做到这一点。每个网格的宽度为 237x237 像素，因此第一个网格将放置在top:0；左：0；，第二个网格将放置在顶部：0；左：237px；，第三个网格将放置在顶部：0；左：474px；等等。
但是，当用户放大或缩小（使用浏览器键Ctrl+/ Ctrl-）时，框没有正确对齐。当页面的背景颜色渗透时，这一点很明显：
无论浏览器的缩放比例如何，保持框“并排”的最佳方式是什么？
PS 这些盒子必须绝对定位，因为它们需要动态移动。
问问题
2515 次
1 回答
2
不同的浏览器以不同的方式对“像素的百分比”进行舍入 - 请参阅CSS 子元素的均匀分布高度
正如评论中所建议的那样，使用背景图像会有很大帮助 - 它应该由 4 个“正方形”或网格组成，如您所说，并水平和垂直重复。
这样，您仍然可以保留 divposition: absolute并将其背景保留为透明 - 但是，如果在制作动画时需要显示平铺背景，则可能必须在动画开始时将其设置为背景颜色，然后设置一旦动画结束，它就会恢复透明 - 但为了使它起作用，我假设你正在移动一个灰色方块代替另一个灰色方块，白色方块也是如此。
根据您的评论进行编辑：
这将是非常棘手的实现，不同的浏览器提供不同级别的缩放，并且很难确定在所有情况下都能很好地缩小（没有任何“半像素”）的 div 的大小。但是，只要不影响功能，放大/缩小时的外观和感觉上的一点差异通常是可以接受的，我希望是这样！
作为最后一个想法，您可以尝试使用 % 定位而不是像素 - 这可能会在缩放时更好地适应，但我不能保证，因为我没有测试过 - 但它可能值得一试！祝你好运！
于 2012-06-06T14:00:20.580 回答