logo标签列表

Safari在子像素计算上进行向下取整

csslayoutresponsive-designpercentagesubpixel
13

我有一个容器，在一行上占用了829像素，并且具有相同尺寸的背景图像。

在该容器内，有一个根据829像素容器计算其宽度的div。在Safari浏览器中，div的宽度大约为173.8px，但由于Safari/Webkit会向下取整，因此其被截断为173像素的宽度。

这个829像素容器中有3个div并排在同一行上。第一个div丢失1像素，第二个丢失2像素，到第三个时，丢失了3像素，因此第三个div向左移动了三个像素。在iPad上，这将导致丢失6个像素。

我已经尝试搜索亚像素渲染问题，并阅读了John Resig的文章和其他SO问题，但我找不到解决方案。

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

我能做什么？

1
如果采用三列布局，请使用33.333333％的宽度，如果存在边距或填充，请将其计算为百分比，并从上述宽度中减去它们。如果存在边框，请使用box-sizing：border-box（还可修复填充计算）。 - Michael
是的，我可以这样做，但最后一个 div 中仍会丢失 1 像素。如果我使用 .33333829=276.33px，.333=1 像素，那么在 iPad 上，最后一个 div 将向左移动 2 像素。 - Masu
我相信使用百分比单位会导致宽度的计算方式不同，这应该可以解决你的问题。这里有一个演示：http://jsfiddle.net/pZg4d/ - Michael
嗯，我不明白，因为我已经将其作为宽度的百分比使用了，因为 Webkit 在百分比上向下取整。 - Masu
等等，你的子div使用了百分比宽度，但你仍然看到这个问题？我从来没有遇到过这个问题 =\ - Michael
6个回答
9
很遗憾，我们无法控制不同浏览器如何渲染次像素。如果我们能通过CSS选择处理舍入的方式就好了，但现实是不行的。如果使用像素而不是百分比，问题就会得到解决，但这显然不是你想要的。如果通过媒体查询将值（可能是百分比值）更改为静态像素，那么你可能可以解决问题。每当我遇到类似情况时，我会将最后一个子元素向右浮动。最后一个元素和其父元素之间多出几个像素通常不会影响太大，但最后一个元素和倒数第二个元素之间多出几个像素就会有很大影响。
3

现在，您可以使用纯 CSS 的 flexbox 来处理这个问题。

来自上面链接的源代码：

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

1
我最近在使用Bootstrap框架时遇到了这个问题。在搜索了一番后，我找到了这个链接http://cruft.io/posts/percentage-calculations-in-ie/并进行了一些设备测试。iOS7 Safari似乎会向下舍入到最接近的整数，而iOS8（默认开启亚像素渲染）似乎会向上略微舍入到最多15个小数位。这在OSX 10.10（Yosemite）上也是一样的。
正如Nils K在他/她的答案中提到的那样，要么使用像素宽度布局，要么尝试调整布局，以确保它足够宽/窄，以适合整个像素的空间。
0
如果由于背景颜色被揭示等原因，无法在“行”中的最后一个元素上使用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在具有百分比宽度的网格项之间运行的背景渐变中的亚像素渲染。我并不主张广泛使用它！然而，这是一个有效的最后手段。

0
如果这与您拥有一个奇数图像集合的滑块有关（例如3个垂直滑块），则一种小型hack是将中间图像的宽度增加到101%。 .middle-slider img { width: 101%; } 对于浏览器的这种处理不当，这只是堆叠的各种hack中略微可接受的解决方案之一，对于大多数用例来说肯定足够了。
-2
4
请在您的答案中直接发布代码，以备后人参考。仅提供链接的答案不适用于 StackOverflow，因为它们可能随时消失。 - Blazemonger
2
是的，链接上的内容已经消失了。 - Darko Tasevski
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接