我们发现iPad在我们的网站上显示细的灰色/黑色线条。这似乎是移动Safari上的某种缩放伪影。我提供了下面两个页面片段，对比度调整以突出显示问题。不幸的是，由于iPad显示效果相当好，这些线条非常明显。它们似乎随着页面缩放而来来去去，并且看起来像divs/images被缩放时在边缘存在舍入问题，导致边缘像素与黑色混合。有人找到解决方法或修复方法吗？谢谢。
iPad查看网页时出现细灰色/黑色线条
13
- Adam
1
看起来类似于https://dev59.com/-lHTa4cB1Zd3GeqPOQwa，但是那个问题没有关于解决方案的建议。 - stestagg
12个回答
12
我尝试了很多方法来消除当移动Safari放大时出现的灰色细线，而我发现最简单、最灵活的方法是在这里：
本质上，你需要添加：
margin-bottom:-1px;
对于那些即将添加幽灵行边框的元素。
- Jared Henderson
2
7可怕的“解决方案”用于像素级布局。 - ProblemsOfSumit
移动端渐变背景的最佳解决方案 - yussan
3
iOS缩放似乎从图像的下一行中获取了一些数据（可能是插值的四舍五入误差？）。我做了一些测试，看起来这是一个一贯性的问题。我已经向Apple报告了这个错误。
将1行背景颜色的像素添加到图像中（或者如果您愿意，可以添加1px填充）似乎可以解决问题。虽然不理想但可行。
在Safari移动版上也可能存在类似于渲染边框错误的问题，请参考Safari移动版中的渲染边框错误。
将1行背景颜色的像素添加到图像中（或者如果您愿意，可以添加1px填充）似乎可以解决问题。虽然不理想但可行。
在Safari移动版上也可能存在类似于渲染边框错误的问题，请参考Safari移动版中的渲染边框错误。
- Marcus
1
如果上面的答案对你没有用，就像对我一样，你可以尝试一个额外的方法，这个方法解决了我的问题：
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */
在底部添加一个透明的边框似乎有所帮助，我的理解是它仍然尝试渲染边框，即使它是透明的，它也会强制重新渲染那些像素。不过这只是猜测，但这个解决方案似乎有效！
- Leonard
0
将这行代码添加到上面的块中对我非常有效。
如果在太多的代码块中都出现了这种情况，那么你应该创建一个类来代替。
margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */
如果在太多的代码块中都出现了这种情况，那么你应该创建一个类来代替。
- Luis Rivera
0
在我的特定情况下，用margin:-1px或border tricks无法解决问题的div。
我有一个具有以下内容的div：
height: 0px;
padding-bottom: 57.2%;
-- 这是一个技巧，用于创建一个在不同宽度下保持其比例的元素，因为上/下填充从宽度派生百分比。在我的情况下，我通过将其更改为以下内容来修复它：
height: 1px;
padding-bottom: 57.2%;
重要提示：值得注意的是，我发现即使更改了样式，刷新有问题的页面也无法删除该行，即使隐藏了body*。为了每次它们回来时都能删除这些行，我不得不重新启动设备。
- ( body {display:none}，即不篡改证据)
- qwertyisms
0
我曾经遇到过这个问题，桌面浏览器和iPad、iPhone上都会出现1像素的线。
这是我的旧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;
}
移除 "background-color:" 已经解决了我所有网站的这个问题。
- Steve
0
我在标题栏底部发现了一条灰色的线（仅适用于iPad），并通过以下方式进行了修复：
position:relative;
z-index:2;
直接添加到头部容器中。 也许这也可以帮助别人。
- Lorenz Haase
0
我在我的主页上也遇到了同样的问题，但这些解决方案都没有起作用。在我的情况下，正如上面Johnny所说，背景显示在div层之间。最终，我用另一个div包裹了现有的层，并将其设置为与两个现有层相同的背景颜色，这样线条就不再可见了。如果其他方法都不起作用，可以试试这个。
- eric
0
由于这是由背景颜色触发的，所以只需使用相同背景颜色的1px gif背景图像并重复即可。如果您使用modernizr，则可以编写以下内容：
.touch .class-of-td {
background: transparent url(../_img/services/1px-bgfix.gif) repeat;
}
这也适用于显示为table-cell的元素以获得垂直对齐：middle。
- Ian Venskus
0
我们在 iPad 上的全屏 iframe 底部发现一条白线，于是我们只需将其高度设置为 100.5%，问题就得到了解决。
- Devin Rhode
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接