ipad和iphone safari上div的单像素/子像素错位

Question

我有以下情况，需要帮助…

1. 两个div，相同大小，相同位置，一个在另一个的顶部
2. 桌面浏览器一切正常
3. 在iphone/ipad上，div
的边框周围出现一条微弱的线。
4. 这条微弱的线并不总是在所有四个边界上。它根据div的位置而变化。这看起来是由于两个div没有正确排列，但根据他们的样式设置，他们是相同的大小和位置。

您可以在这里看到结果:http://www.thoughtartistry.com

任何想法?

Answer 1

我在最近的一个项目中遇到了类似的问题，我有不同背景颜色的背景图像蒙版，以便在移动Safari中为生成的图标着色。问题是，当Safari缩小页面时，图像周围会显示一条背景色线，尽管它应该被屏蔽。我从来没有找到一种方法来防止页面缩小时背景颜色的泄漏。这显然是移动Safari的算法中的一个错误，它重新计算了背景和掩码。我确实找到了一个解决方法:我在元素上添加了一个轮廓，颜色与元素父元素的背景颜色相同。轮廓在元素之外，因此掩盖了流出的部分。如果你的元素父元素的背景图案很激烈，这就不太好了，但如果它是纯色的，就可以了。

Answer 2

负边距是我发现防止这种情况发生的唯一方法。

例如，如果你在两个div之间有一个微弱的水平间隙，在第二个div上添加-1px的上边距将使它稍微重叠，并且当页面缩放时间隙不会重新出现。

某些情况下(如图像精灵或重复模式)可能需要更多的调整，但总体思路是相同的。对于一个精灵，确保在裁剪边界的1个像素内没有大的颜色变化。出血不会超过1像素，所以1像素的调整就足够了。

Answer 3

问题不仅是div匹配在一起，还有图像精灵。

我遵循这个线程的建议，将初始视口缩放设置为1.0。亚像素的问题已经解决了，但后来我在Android等其他设备上测试了我的网站，发现全尺寸的页面很烦人，因为用户每次加载时都要重新缩放。所以我宁愿关掉秤，等苹果把它修好。然后有一天，我在思考如何解决页面边距的问题，我想到了这个简单的CSS解决方案:

html {
  min-width: 1024px;
}

支持此分辨率的设备，例如水平位置的iPad，将把文档比例设置为1.0。在我的情况下，这是足够的解决方案，因为我可以显示页面工作正常，亚像素错误是在Safari/iOS，这将在未来解决希望。

Answer 4

这完全取决于一个人的情况，但在我们的情况下，我们使用这个线程建议的负边距或框阴影，因为outline仅适用于所有边界和ie。outline-bottom不存在

/*
 * Prevent faint lines between elements.
 * @link http://stackoverflow.com/questions/5832869
 */
box-shadow: 0 1px 0 red;

Answer 5

我还通过使用overflow-x: hidden解决了iOS亚像素间隙问题(在全屏网站上);停止侧面滚动&视点缩放停止俯仰变焦。我还将holderdiv设置为宽度:101%;所有元素/图像div设置为float: left;这意味着子像素间隙都在左侧站点，但被holderdiv设置为101%的宽度推出了视野。

Answer 6

将空格下的"clear:both"(如果有的话)从div中删除。

Answer 7

我还必须解决这个问题。如果你只使用Div来定义section，那么

//background.css
.background-color {
  background-color: blue;
}
.background-color div {
  background-color: inherit;
}

Answer 8

我会尝试使用meta/viewport选项，特别是将初始缩放设置为1.0并禁用用户缩放。

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html