1

我们网站上的页脚在移动浏览器上移动了 1px，我们不明白为什么。

这是它在 iPad 上的样子的屏幕截图。页脚顶部的 1px 绿线不会出现在桌面浏览器中——仅在移动浏览器上出现（在 iPhone 和 iPad Chrome 和 Safari 上测试）。

在此处输入图像描述

如果您想亲自查看，请访问www.panabee.com。

谁能解释为什么会这样？

谢谢！

4

6 回答 6

1

这是一个时髦的问题。我在不同的缩放级别上看到不同。

将 #page_box 中的最后一个 div 更改为以下样式：

#all_icons {
    margin: 60px auto 54px auto
}

这在 iPad 上以默认缩放级别为我修复了它。

但是，我看到它以不同的缩放级别返回。我会尝试用透明像素换出该图像，看看它是否消失。我怀疑这与该图像有关。

于 2013-04-22T19:46:49.043 回答
0

我可以在 上看到问题iPhone 4S running iOS 6.1.3，放大后它确实消失了。但我也可以使用Google Chrome Version 26.0.1410.64 m. 当我放大到上面的任何位置时110%（显然，在更高的缩放级别下更容易发现）我可以看到一条绿线出现了一会儿，然后随着图像在几秒钟内变得更清晰而消失。线条不再消失，它始终可见，同时300%图像不再变得更清晰，但在更高的缩放级别下，线条永远不存在。

看到图像变得更清晰，然后看到线条消失，这让我相信问题可能在于图像被保存为隔行扫描图像。显然，您可能是故意这样做的，因为这并不是一件坏事。在这种情况下，您还会知道，隔行扫描图像可以使其显示为自身的降级副本，而其预期收件人（在这种情况下是您网站上的访问者）仅收到了部分图像。

现在我从来没有听说过移动 safari 中的交错图像有任何问题，但是谷歌搜索确实出现了一些结果。在 SO 上包括一个带有一些有用答案的问题的结果。问题似乎始于 iOS 6 更新。大多数问题似乎都可以通过关闭图像的透明度或在关闭隔行扫描选项的情况下保存图像来解决。

因此，我建议您尝试这些选项，看看是否可以解决问题。或者，如果您真的需要隔行扫描，也许可以使用支持隔行扫描的不同图像格式（浏览器可能会在不同格式之间以不同方式处理它？）。

我觉得很有趣的是，谷歌浏览器似乎没有在更高的缩放级别上使用隔行扫描，我想当你已经放大那么多时尝试让图像变得更清晰是没有意义的？

我会发现阅读一些关于不同浏览器如何处理支持它的不同格式的隔行扫描的文档很有趣。我真的找不到任何东西（但我没有很好看）。它可能会解释为什么在 iOS 6 及更高版本中开始出现一些问题，在我看来，iOS 6 上的移动 safari 根本不支持隔行扫描 PNG 图像，因为我可以在 Chrome 中重现该问题，所以我想这可能是基于 WebKit 的浏览器的一个问题，但我Safari 5.1.7确实在所有缩放级别上都做了正确的事情。

无论如何，我希望其中一个建议可以解决您的问题。

于 2013-05-18T07:32:43.373 回答
0

由于您的网页被缩放，这在我看来就像一个舍入错误。

如果您尚未在页面上设置视口元标记，则默认视口宽度设置为 980 像素，无论方向如何。这意味着在横向上，当设备宽度为 768 像素时，页面必须缩小到 78% 左右。

如果您的页面设计依赖于以像素完美精度对齐的各个部分，那么这必然会不时失败。我希望新版本的 webkit 能够更好地处理这类事情，因为它们最近转移到了subpixel layout units，但这并不总是有帮助。

假设这是问题所在，您应该可以通过向页面添加视口元标记来解决它，如下所示：

<meta name="viewport" content="width=device-width">

然后，您需要使用媒体查询来调整布局以更好地处理不同的设备宽度，因为您不能再依赖浏览器为您缩放页面。

即使这样，您也不能保证您的 css 像素一定会转换为精确的设备像素，因为某些移动设备可能具有非整数设备像素比率。不过，它至少应该可以解决您在 iPad 上的问题，因为它的设备像素比为 1 或 2（取决于您是否有视网膜显示器）。

如果媒体查询看起来太费力了，我建议你把你的#footer_top向下移动一个像素，但看起来你已经这样做了。这没有帮助吗？

于 2013-05-15T01:14:55.817 回答
0

这是修复：

#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}

这与背景重复的事实有关，尽管奇怪的是添加 repeat-x 并不能解决它，因为它似乎是从底部到顶部的重复像素。我在图像边缘遇到了类似的东西，我认为这是 webkit 在图像边缘进行插值的方式的错误。无论如何，我所做的只是隐藏顶部像素，但您可能会发现在底部放置一个重复的透明像素也可以解决您的问题（尽管在我的其他项目中没有）。

于 2013-05-18T20:11:51.867 回答
0

尝试将您的 CSS 更改为#footer_top：

#footer_top{

    background: transparent url(/images/footer_header.png) repeat-x center -1px;
    height: 72px;
    position: relative;
    top: 1px;

}

基本上，如果您将背景图像拉高 1px 像素并将 div 面板拉低 1px，它应该有助于解决问题。

于 2013-05-18T08:55:01.757 回答
0

我无法在我的 iPad 上重现这个问题（也许你已经调整了一些东西），但我认为你可以background-origin: border-box;通过 #footer_top 和 #footer 解决这个问题。

于 2013-05-15T07:51:45.277 回答