野生动物园在亚像素计算上四舍五入答案

【问题标题】：safari rounding down on subpixel calculations野生动物园在亚像素计算上四舍五入
【发布时间】：2013-05-26 05:53:48
【问题描述】：

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

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

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

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

在google上，我找到了一篇文章：http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 我试图将其应用于我的情况，但我无法避免不设置在容器 829px 上计算的宽度。

我能做什么？

【问题讨论】：

使用 33.333333% 作为宽度假设三列布局，如果存在边距或填充，也将它们计算为 %，并从上面的宽度中减去它们，如果存在边框，则使用 box-sizing : 边框。（还修复了填充计算）。
是的，我可以这样做，但如果我使用 .33333*829= 276.33px, .33*3=1pixel，那么最后一个 div 中仍然会丢失 1 个像素，所以最后一个 div 将被移动在 ipad 上左移 2 个像素。
我相信使用百分比单位会导致宽度的计算方式不同，这应该可以解决您的问题。这是一个演示：jsfiddle.net/pZg4d
嗯我不明白，我已经使用它作为宽度的百分比，因为 webkit 会向下取整百分比。
等一下，您正在为您的子 div 使用百分比宽度，您仍然看到这个吗？我从来没有遇到过这个问题=\

标签： css layout responsive-design percentage subpixel

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

请直接在您的答案中发布代码，以供后代使用。仅链接的答案不适合 StackOverflow，因为它们可能随时消失。
是的，链接上的内容不见了。

【解决方案3】：

如果由于显示背景颜色等原因而无法对“行”中的最后一个元素执行float: right，则可以使用以下技巧真正巧妙地隐藏背景（注意它的 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 的亚像素渲染，背景渐变在具有百分比宽度的网格项之间运行。我不提倡它的广泛使用！然而，这是一个有效的最后手段。

【讨论】：

【解决方案4】：

我最近在使用 Bootstrap 框架时遇到了这个问题。在网上搜索后，我找到了这个链接http://cruft.io/posts/percentage-calculations-in-ie/ 并做了一些设备测试。 iOS7 Safari 似乎四舍五入到最接近的整数，而 iOS8（默认启用子像素渲染）似乎略微向上舍入到最大值。小数点后 15 位。这在 OSX 10.10 (Yosemite) 上似乎也一样

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

【讨论】：

【解决方案5】：

如果这恰好与您有一组奇数图像的滑块（例如 3 个垂直滑块）有关，一个小技巧是将中间图像的宽度增加到 101%。

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

当谈到浏览器的这种错误处理时，这只是一堆黑客中的一个可以接受的解决方案，而且对于大多数用例来说肯定足够了。

【讨论】：

【解决方案6】：

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

来自上面链接的来源：

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

【讨论】：