我们发现 iPad 在我们的网站上显示灰色/黑色细线。这似乎是移动 Safari 上某种形式的缩放伪影。我在下面提供了两个页面的 sn-ps，调整了对比度以突出问题，不幸的是，因为 iPad 显示非常好，这些线条非常明显。
它们似乎在页面缩放时来来去去，看起来像 div/图像正在缩放，边缘处存在舍入问题，导致边缘像素与黑色混合。
有没有人找到解决方法或解决这个问题？
谢谢
【问题讨论】：
标签： html css ipad mobile-safari
我尝试了一系列修复来在移动 safari 放大时去除这些灰色的细线，我发现的最简单和最灵活的修复在这里：
本质上，你添加
margin-bottom:-1px;
对于添加了虚线边框的元素。
【讨论】：
iOS 缩放似乎从图像的下一行获取了一些数据（可能是插值的舍入误差？）。我做了一些测试，这似乎是一个一致的问题。我将此作为错误报告给 Apple。
在图像中添加 1 行背景色像素（或 1px 填充，如果你愿意的话）似乎可以解决问题。不理想但有效。
一般来说，可能与 Safari Mobile 上的 Rendering borders bug in Safari mobile 相同。
【讨论】：
如果上面的答案对你不起作用，因为它们对我不起作用，那么你可能希望尝试一个额外的东西来解决我的问题：
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */
在底部添加一个透明边框似乎有帮助，我的理由是它仍然尝试渲染一个边框，即使它是透明的，它也会强制它重新渲染这些像素。然而，这纯属猜想，但解决方案似乎有效！
【讨论】：
由于这是由背景颜色触发的，只需使用相同背景颜色的 1px gif bg 图像并重复它。如果你使用modernizr，你可以这样写：
.touch .class-of-td {
background: transparent url(../_img/services/1px-bgfix.gif) repeat;
}
这也适用于显示表格单元格以获取垂直对齐的元素：中间。
【讨论】：
我的标题栏底部有一条灰线（仅限 iPad），并使用以下命令对其进行了修复：
position:relative;
z-index:2;
直接添加到头部容器中。 也许这也可以帮助某人。
【讨论】：
将它添加到行上方的块中对我来说效果很好。
margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */
如果它在太多块中发生在你身上，你应该创建一个类。
【讨论】：
如果<div> 与背景颜色不同且为白色，则非常醒目。
基本上，格式中的background-color 必须与位于其顶部的<div> 颜色相同，否则您会得到一条线。
一个简单的解决方法是更改background-color 以匹配<div>，或者制作一个覆盖<div> 所在背景区域的图块。
【讨论】：
我在桌面浏览器以及 iPad 和 iPhone 上出现了同样的问题。
这是我的旧 CSS：
html,body {
background:url(images/bg.jpg);
height:100%;
background-color:#E8E8E8;
text-align:center;
text-decoration:none;
width:auto;
}
我的新 CSS：
html,body {
background:url(images/bg.jpg);
height:100%;
text-align:center;
text-decoration:none;
width:auto;
}
删除“背景颜色：”已经解决了我所有网站的这个问题。
【讨论】：
在我的特殊情况下，有问题的 div 不会用 margin:-1px 或边框技巧来修复。 我有一个 div：
height: 0px;
padding-bottom: 57.2%;
-- 这是创建一个在不同宽度下保持其比例的元素的技巧，因为填充顶部/底部从宽度派生百分比。就我而言，我可以通过将其更改为：
height: 1px;
padding-bottom: 57.2%;
重要提示：值得注意的是，我发现刷新了违规页面，即使更改了样式，也没有删除该行，即使我隐藏了正文*。要在每次返回时删除线路，我必须重新启动设备。
【讨论】：
我的主页也遇到了同样的问题，但这些解决方案都不适合我。在我的特殊情况下，它是显示在 div 层之间的背景，正如 Johnny up top 所说的那样。我最终用另一个 div 包裹了现有图层，并使其与两个现有图层的背景颜色相同，并且线条不再可见。如果没有其他方法，请尝试一下。
【讨论】：
我们在 iPad 中整页 iframe 的底部有一条白线，所以我们只需将高度设置为 100.5% 就解决了问题。
【讨论】：