Question

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

我在该容器中有一个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上计算的宽度。

我能做什么？

Answer 1

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

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

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

Answer 2

这些天你可以使用flexbox（纯CSS）来处理这个问题。

从上面链接的来源：

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。 Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。

Answer 3

我刚刚遇到了类似的问题，我在这里写了关于我如何解决它的问题：http://maxlapides.com/fixing-subpixel-layout-rendering-in-safari/

基本上，我想出了一些重新计算项目宽度的JavaScript，以便它们跨越容器的整个宽度。

Answer 4

我最近在使用Bootstrap框架时遇到了这个问题。在拖网后我找到了这个链接http://cruft.io/posts/percentage-calculations-in-ie/并进行了一些设备测试。 iOS7 Safari似乎向下舍入到最接近的整数，而iOS8（默认情况下子像素渲染）似乎略微向上舍入到最大值。小数点后15位这在OSX 10.10（优胜美地）上似乎也是一样的

正如Nils K在他/她的回答中提到的那样，要么使用像素宽度布局，要么尝试调整布局以确保其宽/窄足以使整个像素适合空间

Answer 5

如果您无法对“＆＃39;行”中的最后一个元素float: right进行操作因为背景颜色被揭示等，你可以使用以下技巧真的 hackily隐藏背景（注意它的SASS代码）：

.safari .parent_element { // CHANGE
  position: relative;

  &:after {
    content: ''
    position: absolute;
    height: 100%;
    width: 3px;
    top: 0;
    left: calc(100% - 2px); // Or sometimes 'right: 2px;' will work
    background-color: $pageBackground; // Change
  }
}

使用Modernizr测试将safari类添加到<html>：

Modernizr.addTest('safari', function() {
  var uagent = navigator.userAgent.toLowerCase();

  return /safari/.test(uagent) && !/chrome/.test(uagent);
});

我使用此测试的唯一原因是克服Safari的子像素渲染，背景渐变在具有百分比宽度的网格项之间运行。我并不主张它的广泛使用！但是，它是一种有效的最后手段。

Answer 6

如果这恰好与你有一组奇怪图像的滑块（例如3个垂直滑块）有关，那么一个小的黑客就是将中间图像的宽度增加到101％。

.middle-slider img { width: 101%; }

当谈到浏览器的这种错误处理时，这只是一堆中的一种轻度可接受的解决方案，对于大多数用例来说当然是足够的。

safari在亚像素计算上向下舍入

6 个答案: