1 像素间隙仅在 iPad 上出现，但在 Safari 和 Chrome 上正常

发布于 2024-11-09 08:38:08 字数 649 浏览 0 评论 0原文

云后的这条线，仅在 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}

原文

Here at this line after clouds which will be only visible in iPad or iPhone. Any idea how to solve it?

It's fine in all other desktop browsers.

enter image description here

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}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

草莓味的萝莉 2024-11-16 08:38:08

当页面比例因子小于 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 引擎中报告了许多关于舍入问题的错误：

This seems to be a bug of the WebKit rendering engine on the iPad, when the page scale factor is less than 1.0. If you keep the page scale factor above 1.0, then the pixel gap does not show up. This can be done with a meta tag:

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

I also found a simple page that demonstrate a similar issue (a rendering glitch on iPad only):

Rounding error with widths

In the past, there have been a number of bugs reported for rounding issues in the WebKit engine:

回复收藏 0 原文

甲如呢乙后呢 2024-11-16 08:38:08

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

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

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

回复收藏 0 原文

-柠檬树下少年和吉他 2024-11-16 08:38:08

我还通过使用 Overflow-x:hidden; 解决了 iOS 子像素间隙问题（在全屏网站上）。停止横向滚动&视点缩放以停止俯仰缩放。我还将holder div设置为width: 101%;并将里面的所有元素/图像 div 设置为 float: left;。这意味着子像素间隙全部位于左侧站点，但被设置为 101% 宽度的支架 div 推到了视图之外。

回复收藏 0 原文

山色无中 2024-11-16 08:38:08

尝试一下，

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

}

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

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

}

其中之一也必须工作:)

更新：

我想我明白了，

remove #wrapper background-color;

remove #banner-switcher background:

Try this

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

}

may be there is a small resolution problem also so try this also

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

}

one of them has to work :)

UPDATE:

I think i got it,

remove #wrapper background-color;

remove #banner-switcher background:

回复收藏 0 原文

无所的.畏惧 2024-11-16 08:38:08

尝试在 PX 中设置 #banner 的高度，而不是在 EM 中，并且云的高度都是 112px 和 113px，而不是 111px。

回复收藏 0 原文

寒尘 2024-11-16 08:38:08

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

以下技巧对我来说非常有用：

.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/[email protected]');
    }
}

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

I have found that this tends to occur when background images are up-scaled to match the resolution of the device. I suspect that this occurs due to a small amount of colour bleeding along the outer edges of your image which can usually be resolved by providing an additional version of your background for higher pixel density displays (i.e. retina in this case).

The following trick works great for me:

.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/[email protected]');
    }
}

The above solution worked perfectly in my case.

回复收藏 0 原文