我有一个“绘制”网格的页面，如下所示：
它通过使用绝对定位的 div 来实现这一点。每个网格的宽度为 237x237 像素，因此第一个网格将放置在顶部：0；左：0；，第二个网格将放置在顶部：0；左：237px；，第三个网格将放置在顶部：0；左：474px；等等。
However, when the user zooms in or out (using the browser keys Ctrl+ / Ctrl-), the boxes are not aligned properly. This is evident when the background color of the page seeps through:
无论浏览器的缩放比例如何，保持框“并排”的最佳方法是什么？
附：这些盒子必须绝对定位，因为它们需要动态移动。
不同的浏览器以不同的方式舍入“像素的百分比” - 请参阅使用 CSS 均匀分布子元素的高度 https://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css
正如评论中所建议的，使用背景图像会有很大帮助 - 它应该由 4 个“正方形”或您所说的网格组成，并水平和垂直重复。
这样，你仍然可以保留 divposition: absolute并将其背景保留为透明 - 但是，如果在设置动画时需要显示图块背景，则可能需要在动画开始时将其设置为背景颜色，然后在动画结束后将其设置回透明 - 但是为此，我假设您正在移动一个灰色方块来代替另一个灰色方块，对于白色方块也是如此。
编辑您的评论：
这将是非常棘手的实现，不同的浏览器提供不同级别的缩放，并且很难找出在所有情况下都能很好地缩小（没有任何“半像素”）的 div 大小。然而，只要功能不受影响，放大/缩小时外观和感觉上的一点差异通常是可以接受的，我希望情况确实如此！
作为最后一个想法，您可以尝试使用％定位而不是像素 - 这可能会在缩放时更好地适应，但我不能保证，因为我还没有测试过 - 但可能值得一试！祝你好运！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
