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

Question

云端的这条线路 只能在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上出现渲染故障）：

• 宽度舍入误差

过去，在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子像素间隙问题（在全屏网站上）; 停止侧滚动和视点比例以停止音高变焦。 我也有持有者divs设置宽度：101％; 并且所有元素/图像div都设置为float：left;。 这意味着子像素间隙全部位于左侧位置，但被设置为101％宽度的支架div推出视野。

Answer 4

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

以下技巧对我很有用：

.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 5

尝试这个

#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 6

尝试设置PX中#banner的高度不在EM 。云的高度为112px到113px而不是111px。

Answer 7

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