移动 Safari 中的线条伪影答案

【问题标题】：Line artifacts in mobile Safari移动 Safari 中的线条伪影
【发布时间】：2011-04-23 14:50:48
【问题描述】：

Safari 在我的网站上的 div 之间以某种比例呈现黑线。当它分解为按钮或其他东西在两个不同的 div 中切碎的图像时，这尤其糟糕。我不能在两个 div 的父级中放置 BG，因为它们是透明的 .png。有什么解决办法还是直接解决？

TravisO 也有同样的问题，我改变了页面的布局方式，最初它是一个有 5 行的简单表格，我删除了这些行，只使用图像和 br，仍然发生。我尝试通过 CSS 删除所有填充和边距，但很明显问题不在于浏览器渲染，而是通过重新采样浏览器将页面转换为适合屏幕的大小。您可以在以下位置查看我的损坏页面：

【问题讨论】：

【解决方案1】：

在 div-tag 中显示 .png-image 时，我遇到了类似的问题。在图像的一侧渲染了一条细（我认为是 1 px）黑线。为了修复它，我必须添加以下 CSS 样式：box-shadow: none;

【讨论】：

【解决方案2】：

将initial-scale 值添加到视口元标记为我解决了这个问题。

<meta name="viewport" content="initial-scale=1.0">

【讨论】：

【解决方案3】：

我发现更改带有“灰色边框”的元素的背景颜色对我有用。

【讨论】：

【解决方案4】：

此问题是由于移动 safari 在重新缩放背景图像以进行显示时产生的舍入错误（这是一个错误：http://openradar.appspot.com/8684766）。

解决方案是将左侧的右键边缘宽度增加 1 或 2 像素。然后相应地调整您的 CSS，以便默认情况下不显示您添加的 1 或 2 个像素。

【讨论】：

【解决方案5】：

以下 CSS，添加到有问题的 div 中并带有指定的背景图像，是为我修复它的原因。在某些 Safari 缩放级别下，小于 3 像素的任何内容仍会显示光伪影。

margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */

【讨论】：

【解决方案6】：

TravisO，您应该摆脱 css 中的 img 样式！如果你只使用这个：

<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #f00;
    text-align: center;
}
</style>

它应该可以在您的 iPhone 上正确呈现！

【讨论】：