我们网站的页脚在移动浏览器上移动了 1px，我们不明白为什么。
这是它在 iPad 上的屏幕截图。页脚顶部的 1px 绿线不会出现在桌面浏览器中——仅在移动浏览器上出现（在 iPhone 和 iPad Chrome 和 Safari 上测试）。
如果您想亲自查看，请访问www.panabee.com。
谁能解释为什么会这样？
谢谢！
【问题讨论】：
标签： css html google-chrome mobile mobile-safari
这是一个时髦的问题。我在不同的缩放级别上看到它的方式不同。
将#page_box中最后一个div改成如下样式：
#all_icons {
margin: 60px auto 54px auto
}
这在 iPad 上以默认缩放级别为我修复了它。
但是，我看到它以不同的缩放级别返回。我会尝试用透明像素换出该图像，看看它是否消失。我怀疑这与该图像有关。
【讨论】：
我可以在iPhone 4S running iOS 6.1.3 上看到该问题，放大后它确实消失了。但我也可以使用Google Chrome Version 26.0.1410.64 m 重现该问题。当我放大到110% 以上的任何位置时（显然，在更高的缩放级别下更容易发现）我可以看到一条绿线出现了一会儿，然后随着图像在几秒钟内变得更清晰而消失。在300%，这条线不再消失，它始终可见，同时图像不再变得更清晰，但在更高的缩放级别下，这条线永远不会出现。
看到图像变得更清晰，然后看到线条消失，这让我相信问题可能在于图像被保存为interlaced image。显然，您可能是故意这样做的，因为这并不是一件坏事。在这种情况下，您还会知道，隔行扫描图像可以使其显示为自身的降级副本，而其预期接收者（在本例中为您网站上的访问者）仅接收了部分图像。
现在我从未听说过移动 safari 中的隔行扫描图像有任何问题，但 doing a Google search did turn up some results。包括a result to a question with some useful answers here on SO。问题似乎始于 iOS 6 更新。大多数问题似乎都可以通过关闭图像的透明度或在关闭隔行扫描选项的情况下保存图像来解决。
所以我建议您尝试这些选项，看看是否能解决问题。或者，如果您真的需要隔行扫描，可以使用支持隔行扫描的不同图像格式（浏览器在不同格式之间的处理方式可能不同？）。
我觉得很有趣的是，谷歌浏览器似乎在更高的缩放级别上不使用隔行扫描，我想尝试让图像在放大时更清晰是没有意义的已经很多了吗？
我会发现阅读一些关于不同浏览器如何处理支持它的不同格式的隔行扫描的文档很有趣。我真的找不到任何东西（但我没有很好看）。它可能会解释为什么在 iOS 6 及更高版本中开始出现一些问题，在我看来，iOS 6 上的移动 safari 根本不支持隔行扫描 PNG 图像，因为我可以在 Chrome 中重现该问题，所以我想这可能是基于 WebKit 的浏览器的一个问题，但我的 Safari 5.1.7 在所有缩放级别上都做了正确的事情。
无论如何，我希望其中一个建议能解决您的问题。
【讨论】：
在我看来，这是由于您的网页被缩放而导致的舍入错误。
如果您没有在页面上设置viewport metatag，则默认视口宽度设置为 980 像素，无论方向如何。这意味着在横向上，当设备宽度为 768 像素时，页面必须缩小到 78% 左右。
如果您的页面设计依赖于以像素完美精度对齐的各个部分，那么这必然会不时失败。我希望新版本的 webkit 能够更好地处理这类事情，因为它们最近转移到了subpixel layout units，但这并不总是有帮助。
假设这是问题所在，您应该可以通过向您的页面添加视口元标记来解决它，如下所示：
<meta name="viewport" content="width=device-width">
然后您需要使用媒体查询来调整布局以更好地处理不同的设备宽度，因为您不能再依赖浏览器为您缩放页面。
即便如此，您也不能保证您的 css 像素一定会转换为精确的设备像素，因为某些移动设备可能具有非整数 device pixel ratios。不过，它至少应该可以解决您在 iPad 上的问题，因为它的设备像素比为 1 或 2（取决于您是否有视网膜显示器）。
如果媒体查询看起来太费力了，我建议您将#footer_top 向下移动一个像素，但看起来您已经这样做了。这没有帮助吗？
【讨论】：
我无法在我的 iPad 上重现该问题（也许您已经进行了一些调整），但我认为您可以在 #footer_top 和 #footer 上使用 background-origin: border-box; 解决此问题。
【讨论】：
尝试将 #footer_top 的 CSS 更改为：
#footer_top{
background: transparent url(/images/footer_header.png) repeat-x center -1px;
height: 72px;
position: relative;
top: 1px;
}
基本上，如果您将背景图像拉高 1px 像素并将 div 面板拉低 1px，它应该有助于解决问题。
【讨论】：
解决方法如下：
#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}
这与背景重复的事实有关，尽管奇怪的是添加 repeat-x 并不能解决它，因为它似乎是从底部像素到顶部的重复。我在图像边缘遇到了类似的东西，我认为这是 webkit 在图像边缘进行插值的方式的错误。无论如何，我所做的只是隐藏顶部像素，但您可能会发现在底部放置一个重复的透明像素也可以解决您的问题（尽管在我的其他项目中没有）。
【讨论】：