1 像素间隙仅适用于 iPad，但适用于 Safari 和 Chrome答案

【问题标题】：A 1 pixel gap only coming on iPad but fine on Safari and Chrome1 像素间隙仅适用于 iPad，但适用于 Safari 和 Chrome
【发布时间】：2011-08-31 04:38:33
【问题描述】：

Here at this line after clouds 仅在 iPad 或 iPhone 中可见。知道如何解决吗？

在所有其他桌面浏览器中都可以。

CSS

#banner-inner { height: 270px;     margin: 0 auto;    position: relative;    width: 954px;}

.cloud-bottom { position: absolute; background: url(images/clouds_dark.png) repeat-x 0 bottom ; z-index: 1; width:100%;height:111px;bottom:0}

.cloud-top { position: absolute; background: url(images/clouds_light.png) repeat-x 0 bottom ; z-index: 4;width:100%;height:111px;bottom:0}

【问题讨论】：

也许尝试用em而不是px来定义事物？
奇怪的是我什至没有看到那条线。我只看到两条虚线grab.by/adxo
@corroded- Line 只能在 ipad 上看到。
@Jitendra Vyas 图形 cloud_light.jpg 发生了一些有趣的事情。我已经把它变成不透明的，并且从中间开始有一个像素的边缘。我将其发布为未回答。
放大后线是否保持1px，或者放大后是否更大？如果在我的某些网站上遇到过，即使放大，这条线在 iphone 上仍然是 1 个物理 1px。我只是懒得修复它。

标签： iphone html css ipad

【解决方案1】：

这似乎是 iPad 上 WebKit 渲染引擎的一个 bug，当页面比例因子小于 1.0 时。如果将页面比例因子保持在 1.0 以上，则不会显示像素间隙。这可以通过元标记来完成：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

我还发现了一个简单的页面，该页面演示了类似的问题（仅在 iPad 上出现了渲染故障）：

Rounding error with widths

过去，WebKit 引擎中已报告了许多舍入问题的错误：

【讨论】：

谢谢。问题解决了
谢谢！修复了我的问题，在 Ipad 上出现了一条线！

【解决方案2】：

如果不希望禁用缩放，并且边距技巧不起作用（它可能适用于背景颜色，但我无法让它适用于背景图像），这是另一种解决方案：

将所有背景图像放大 1 或 2 px（将它们剪切，使它们包含上/下图形的 1 px 副本），并使用 css background-size 和 background-position 确保额外的（不需要的）像素是未显示 - 只有当浏览器需要额外的像素来覆盖渲染间隙时才会使用它。

经过测试，修复了 Android 2.3 默认浏览器上的渲染错误（将于周一在 iPhone 和 iPad 上测试），以及 PC 版 Chrome 中的缩放错误。

【讨论】：

【解决方案3】：

我还通过使用 overflow-x: hidden; 解决了 iOS 亚像素间隙问题（在全屏网站上）停止侧向滚动和视点缩放以停止音高缩放。我还将持有人 div 设置为 width: 101%;并且里面的所有元素/图像div都设置为float：left;。这意味着子像素间隙都在左侧站点上，但被设置为 101% 宽度的保持器 div 推到了视野之外。

【讨论】：

【解决方案4】：

试试这个

#wrapper {
     margin: -2px auto;
... rest of your css....

}

可能还有一个小的分辨率问题，所以也试试这个

#wrapper {
    background-color: #fff;
... rest of your css....

}

其中一个必须工作:)

更新：

我想我明白了，

remove #wrapper background-color;

remove #banner-switcher background:

【讨论】：

你在多个ipad上测试过吗？
我在 iphone 上进行了测试，它给出了相同的渲染。你在 ipad 上测试了吗我在这里添加了你的建议你可以测试tinyurl.com/3l8xvh6
@lbu - 不一样我已经更新了我的示例代码。你可以签到 iphone 或 ipad 线还在来

【解决方案5】：

尝试将#banner 的高度设置为PX 而不是EM 并且云的高度是112px en 113px 而不是111px。

【讨论】：

【解决方案6】：

我发现当背景图像被放大以匹配设备的分辨率时，往往会发生这种情况。我怀疑这是由于图像外边缘的少量颜色渗出造成的，通常可以通过为更高像素密度的显示器（即本例中的视网膜）提供额外版本的背景来解决。

以下技巧对我很有效：

.your-thing {
    background-repeat: no-repeat;
    background-image: url('img/your-background.png');
    background-size: 400px; /* width of "your-background.png" */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2) {
    .your-thing {
        /* override with version which is exactly 2x larger */
        background-image: url('img/your-background@2x.png');
    }
}

上述解决方案在我的情况下非常有效。

【讨论】：

【解决方案7】：

关闭透明度时的有趣行为。即使是 jpg，它也确实显示了这个工件。看起来像 webkit 渲染引擎中的一个错误。

【讨论】：