13

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

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

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

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

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

我能做些什么？

4

6 回答 6

9

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

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

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

于 2013-05-31T13:06:53.087 回答
3

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

从上面链接的来源：

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

于 2015-11-30T01:45:44.863 回答
1

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

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

于 2015-02-04T16:18:41.807 回答
0

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

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

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

于 2015-03-27T10:30:39.147 回答
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
  }
}

Safari 类被添加到<html>使用 Modernizr 测试：

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

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

我曾经使用这个测试的唯一原因是克服 Safari 的亚像素渲染，背景渐变在具有百分比宽度的网格项目之间运行。我不提倡它的广泛使用！然而，这是一个有效的最后手段。

于 2014-07-03T19:31:56.353 回答
-1

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

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

于 2013-12-27T17:51:53.560 回答