只有1像素的间隙才会出现在iPad上但在Safari和Chrome上却很好

Question

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}

Answer 1

当页面比例因子小于1.0时，这似乎是iPad上WebKit渲染引擎的错误。如果将页面比例因子保持在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引擎中的舍入问题报告了一些错误：

• WebKit Bug #5531
• WebKit Bug #14956
• WebKit Bug #18013

Answer 2

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

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

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

Answer 3

我还使用overflow-x：hidden解决了iOS子像素间隙问题（在全屏网站上）;停止横向滚动＆amp;视点比例停止音高变焦。我也有持有者divs设置宽度：101％;并且所有元素/图像div都设置为float：left;。这意味着子像素间隙全部位于左侧位置，但被设置为101％宽度的支架div推出视野。

Answer 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: 

Answer 5

尝试将#banner中的PX的高度设置为EM而不是{{1}}中的云的高度为112px和113px，而不是111px。

Answer 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');
    }
}

上述解决方案在我的案例中完美无缺。

Answer 7

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