Question

以下网站：

http://staging.jungledragon.com

使用Safari在iPad上有一些渲染问题，所以我正在尝试修复它们。有一个问题我被困住了。如果您有iPad，请以纵向模式打开网站。有两条不需要的水平线出现，一条顶部穿过标签（热门，新鲜等），另一条顶部位于蜥蜴图的正上方。两条线都不应该在那里。

这些行不会出现在任何其他测试的浏览器上，包括Windows上的Safari。当您在iPad上将同一个站点移动到横向模式时，顶部水平线消失，而底部水平线保持不变。如果你放大到底线，它也会消失。

我一直在尝试各种CSS修复无济于事，我现在开始认为这是Safari的渲染问题，尽管可能是由我引发的。

非常感谢任何帮助。这似乎是一个小问题，但我讨厌邋。。

Answer 1

问题与Mobile Safari处理背景图片的方式有关。弹出的绿线（仅在您的内容区域内）来自另一个元素。

尝试“过度调整”您的图片。例如：图像在100像素高度处被截断，使图像高110像素。这对我有用......大多数时候。

编辑：我确实在我的iPad上查看了该网站，我刚刚看到该单行弹出。另请注意，当您放大/缩小时它会消失，这会告诉我这是一个渲染错误（不是您的CSS中的内容）。

Answer 2

糟糕 - 这是怎么发生的？

要在head标记中停止缩放iPad的元数据：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 3

另一种方法是指定背景的大小。这可以使用css选择器“background-size”来完成。

如果您的背景图片高40像素，则以下代码将阻止水平线在iPad上显示：{background-size：100％40px}

Answer 4

Damien和namsral指出，手动或使用CSS3过度调整背景图像几乎总是有效。

但是，有时这不能解决背景图像锚定在某个位置的问题。例如，如果您的背景图像锚定在div的底部，并且该行显示在此div的底部，那么您应该将背景图像移动到[比底部]更低的一定量，具体取决于高度你的div。例如：

background-postion：center 100.1％;

Answer 5

你尝试重置css了吗？如果没有尝试添加一个它可能是移动设备的标准，看看它是否仍然存在，如果它确实在firebug中检查它，看看它究竟是什么

Answer 6

你可以通过使用这个元标记来完全在iPad上禁用缩放来解决很多这些“iPad缺口”问题：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

这可以防止在iPad上进行缩放，但它完全解决了我所有的“div gap”问题。

Answer 7

我正在使用的背景图像在内容div的中途停止，然后应该显示容器元素的背景。

由于iPad会缩放到最外层的div，因此不会显示应用于html标记的相关背景。当没有定义后备背景颜色时，iPad似乎不喜欢它，所以我不得不使用媒体查询添加一些特定于iPad的CSS：

html { background:#ffffff url("images/bg-html.png") center top repeat-x; }
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; }

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat;
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif;
    line-height: 20px;
    color:#000;
    min-width: 980px;
}

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body {
        background: #fff url("images/bg-body.jpg") center top no-repeat;
    }

    body#inside {
        background: #fff url("images/inside-bg-body.jpg") center top no-repeat;
    }
}

Answer 8

欢呼，我有同样的但是在Androids和使用背景图像：100％460px;帮助解决我的问题：）

Answer 9

有一个没有任何内容的span或div。

请为此disply:none;或跨度提供div，然后查看结果。

在iPad上呈现时，我网站上的神秘水平线条

9 个答案: