css - 在 iPad 上呈现时我的网站上出现神秘的水平线

Question

以下站点:

http://staging.jungledragon.com

在使用 Safari 的 iPad 上有一些渲染问题，所以我正在尝试修复它们。不过，有一个问题让我卡住了。如果您有 iPad，请以纵向模式打开网站。出现了两条不需要的水平线，一条横跨选项卡(流行、新鲜等)的顶部一条线和一条位于蜥蜴插图正上方的底部线。两条线都不应该存在。

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

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

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

Answer 1

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

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

编辑:我确实在我的 iPad 上查看了该网站，我只是看到弹出了那一行。另请注意，当您放大/缩小时它会消失，这告诉我这是一个渲染错误(不是您的 css 中的东西)。