无论浏览器的缩放比例如何，如何保持元素对齐? [英] How to keep elements aligned regardless of browser zoom ratio?
问题描述
我有一个页面绘制"网格，如下所示:
I have a page which "draws" grids as seen below:
它通过使用绝对定位的div来实现.每个栅格的宽度为237x237像素，因此第一个栅格将放置在 top:0处；left:0; ，第二个网格将放置在 top:0;上.left:237px; ，第三个网格将放置在 top:0;处；left:474px; ，依此类推.
It does this by using absolutely positioned divs. Each grid is 237x237 pixels wide so the first grid would be placed at top:0; left:0;, the second grid would be placed at top:0; left:237px;, the third grid would be placed at top:0; left:474px; and so on.
但是，当用户放大或缩小时(使用浏览器键 Ctrl + / Ctrl -)，则框未正确对齐.当页面的背景色渗入时很明显:
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:
不管浏览器的缩放比例如何，保持框并排的最佳方法是什么?
What's the best way to keep the boxes "side-by-side" regardless of the browser's zoom ratio?
P.S.盒子必须绝对放置，因为它们需要动态移动.
P.S. The boxes had to be positioned absolutely because they need to be dynamically moved.
推荐答案
different browsers do round "% of a pixel" in a different way - see Evenly distributed height of child elements with CSS
正如评论中所建议的那样，使用背景图像将大有帮助-它应由您所谓的4个正方形"或网格组成，并在水平和垂直方向上重复.
as it has been suggested in the comments, using a background image would greatly help - it should composed by 4 "squares" or grids as you call them, and repeated horizontally and vertically.
以这种方式，您仍然可以使div保持 position:absolute 并将其背景保持透明-但是，如果在设置动画背景时需要显示平铺背景，则可能必须在动画开始时将其设置为背景色，然后在动画结束后将其设置为透明-但这要起作用，我假设您要移动一个灰色正方形来代替另一个灰色正方形，并且对白色也是如此一个.
in that way, you could still keep the divs with position: absolute and leave their background as transparent - however, if the tile background needs to be shown while you animate it, you might have to set it as a background color when the animation starts and then set it back to transparent once the animation is concluded - but for this to work I'm supposing that you are moving a grey square in place of another grey square and the same about white ones.
在评论后进行
要实现这一点将非常棘手，不同的浏览器提供不同的缩放级别，并且很难确定div的大小在所有情况下都可以很好地缩小(没有任何半像素").但是，只要不影响功能，通常可以接受放大/缩小时外观上的一些差异，我希望情况确实如此！
This is gonna be very tricky to achieve, different browsers offer different levels of zoom and it's very hard to figure out a size for your divs that would scale down nicely (without any "half pixels") in all cases. However, as long as functionality is not affected, a little discrepancy in the look and feel when things are zoomed in/out is normally very acceptable, and I hope that this is the case!
最后一个想法是，您可以尝试使用％定位而不是像素-缩放时可能会适应性更好，但是我不能保证，因为我还没有测试过-但值得一试！祝你好运！
as a last idea, you could try using % positioning instead of pixels - this possibly will adapt better when zooming, but I cannot guarantee as I haven't tested it - but it might be worth giving it a try! best of luck with this!
这篇关于无论浏览器的缩放比例如何，如何保持元素对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
