css - Safari 在子像素计算上四舍五入

Question

我有一个容器，每行占 829 像素，并且有一个相同大小的背景图像。

我在该容器中有一个 div，它根据 829px 容器计算其宽度。在 safari 上，div 的宽度大约为 173.8px，但由于 safari/webkit 向下舍入，它被截断并变成 173px 的宽度。

这个 829 像素的容器在同一行内嵌了 3 个 div。第一个 div 丢失了 1px，第二个 div 丢失了 2px，第三个 div 丢失了 3 个像素，所以第三个 div 向左移动了三个像素。在 iPad 上，丢失了 6 个像素。

我尝试搜索子像素渲染问题，并且阅读了 john resig 的文章和其他一些 SO 问题，但我找不到解决方案。

在谷歌上，我找到了一篇文章:http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310我试图将它应用到我的情况，但我无法摆脱不设置根据容器 829px 计算的宽度。

我能做什么？

Answer 1

遗憾的是，对于不同浏览器如何呈现子像素，您无能为力。如果我们可以选择如何通过 CSS 处理舍入，那就太好了，但不行。

简单地使用像素而不是百分比可以解决问题，但这显然不是您想要的。我想如果您通过媒体查询更改值(可能是百分比值)，您可以使用静态像素。

每当我发现自己处于类似情况时，我都会 float 最后一个 child 到右边。最后一个元素和倒数第二个元素之间的一些额外像素通常不会像最后一个元素与其父元素之间的一些额外像素那样受到伤害。