css – safari在子像素计算上向下舍入

前端之家收集整理的这篇文章主要介绍了css – safari在子像素计算上向下舍入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个容器,连续占用829px,并具有相同大小的背景图像.

我在该容器中有一个div,它根据829px容器计算其宽度.
在safari上,div的宽度似乎是173.8px,但自从safari / webkit向下舍入后,它被截断并变为173px的宽度.

这个829px容器在同一行有3个div内联.第一个div,1px丢失,第二个,2px丢失,第三个,3个像素丢失,所以第三个div向左移动三个像素.在ipad上,丢失了6个像素.

我试图搜索亚像素渲染问题,并且我已经阅读了john resigs文章和其他一些SO问题,但我无法找到解决方案.

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

我能做什么?

解决方法

遗憾的是,关于不同的浏览器如何渲染子像素,你无法做很多事情.如果我们可以选择如何通过CSS处理舍入,那将是很好的,但不是.

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

每当我发现自己处于类似情况时,我会将最后一个孩子漂浮到右边.最后一个和最后一个元素之间的一些额外像素通常不会伤害最后一个元素与其父元素之间的一些额外像素.

猜你在找的CSS相关文章