Html 用 iPad 查看的网页上的细灰/黑线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4780896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Thin gray/black lines on web page viewed with iPad
提问by Adam
We're finding the the iPad is displaying thin grey/black lines on our site. It seems to be some form of scaling-artefact on mobile Safari. I've provided two snippets of pages below, with the contrast tweaked to highlight the issue, unfortunately because the iPad display is quite good, these lines are quite noticeable.
我们发现 iPad 在我们的网站上显示灰色/黑色细线。这似乎是移动 Safari 上某种形式的缩放人工制品。我在下面提供了两个页面片段，调整了对比度以突出问题，不幸的是，由于 iPad 显示效果非常好，这些线条非常明显。
They seem to come and go as the page is zoomed, and look like divs/images are being scaled with rounding issues at the edges, causing the edge pixel to be blended with black.
随着页面的放大，它们似乎来来去去，看起来像 div/图像被缩放，边缘有圆角问题，导致边缘像素与黑色混合。
Has anyone found a workaround or fix for this?
有没有人找到解决方法或解决这个问题？
Thanks
谢谢
回答by Jared Henderson
I tried a bunch of fixes to remove these grey-ish tiny lines when mobile-safari was zoomed in, and the simplest and most flexible fix I found was here:
当移动 safari 放大时，我尝试了一系列修复来删除这些灰色的细线，我找到的最简单、最灵活的修复在这里：
Essentially, you add
基本上，您添加
margin-bottom:-1px;
To elements that are getting phantom line borders added.
到添加幻线边框的元素。
回答by Marcus
The iOS zoom seems to take some data from the next line in the image (maybe rounding error on the interpolation?). I did some tests, and it seems to be a consistent problem. I reported this as a bug to Apple.
iOS 缩放似乎从图像的下一行获取一些数据（可能是插值的舍入错误？）。我做了一些测试，这似乎是一个一致的问题。我将此作为错误报告给Apple。
Adding 1 line of background-colored pixels to the image (or 1px padding if you will) seems to do the trick. Not ideal but works.
向图像添加 1 行背景色像素（或 1px 填充，如果您愿意）似乎可以解决问题。不理想但有效。
Possibly same problem as Rendering borders bug in Safari mobileon Safari Mobile in general.
一般而言，可能与Safari Mobile 上 Safari mobile 中的渲染边界错误相同的问题。
回答by Leonard
If the answers above don't work for you as they didn't for me there is an extra thing you may wish to try which did solve me issue:
如果上面的答案对您不起作用，因为它们对我不起作用，那么您可能希望尝试一些额外的事情来解决我的问题：
border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */
Adding a border a transparent border to the bottom seemed to help, my reasoning is that it still tries to render a border and even though it's transparent it forces it to re-render those pixels. That however is pure conjecture but the solution seems to work!
在底部添加一个透明边框似乎有帮助，我的推理是它仍然尝试渲染边框，即使它是透明的，它也会强制它重新渲染这些像素。然而，这纯粹是猜测，但解决方案似乎有效！
回答by Ian Venskus
Since this is triggered by background color just use a 1px gif bg image of the same background color and repeat it. If you use modernizr you can write something like this:
由于这是由背景颜色触发的，因此只需使用相同背景颜色的 1px gif bg 图像并重复它。如果您使用 Modernizr，您可以编写如下内容：
.touch .class-of-td {
background: transparent url(../_img/services/1px-bgfix.gif) repeat;
}
.touch .class-of-td {
background: transparent url(../_img/services/1px-bgfix.gif) repeat;
}
This also works for elements that are displayed table-cell to get vertical-align: middle.
这也适用于显示表格单元格的元素以获得垂直对齐：中间。
回答by Lorenz Haase
I had a greyish line (iPad only) at the bottom of my header bar and fixed it with:
我的标题栏底部有一条灰线（仅限 iPad），并使用以下方法修复它：
position:relative;
z-index:2;
directly added to the header container. perhaps this could also help out someone.
直接添加到头容器中。也许这也可以帮助某人。
回答by qwertyisms
In my particular case, the offending div would not be fixed with margin:-1px or border tricks. I had a div with:
在我的特殊情况下，有问题的 div 不会用 margin:-1px 或边框技巧来修复。我有一个 div：
height: 0px;
padding-bottom: 57.2%;
-- this is a trick to create an element that retains its proportions at different widths, because the padding top/bottom derives the percentage from the width. In my case, I was able to fix it by changing this to:
-- 这是创建一个在不同宽度下保持其比例的元素的技巧，因为填充顶部/底部从宽度派生百分比。就我而言，我能够通过将其更改为：
height: 1px;
padding-bottom: 57.2%;
IMPORTANT: it is worth noting that I found a refresh of the offending page, even with changed styles, did not remove the line, even when I hid the body*. To remove the lines each time they came back, I had to reboot the device.
重要提示：值得注意的是，我发现刷新了违规页面，即使更改了样式，也没有删除该行，即使我隐藏了正文*。为了在它们每次回来时移除这些线路，我不得不重新启动设备。
- ( body {display:none} that is, not tampering with evidence)
- （ body {display:none} 即不篡改证据）
回答by eric
I also had the same problem in my home page and none of these solutions worked for me. In my particular case it was the background showing up in between the div layers as Johnny up top was saying. I ended up wrapping the existing layers with another div and made it the same background color as the two existing layers and the lines were not visible anymore. If nothing else works give it a try.
我的主页也遇到了同样的问题，但这些解决方案都不适合我。在我的特殊情况下，正如 Johnny up top 所说的那样，背景显示在 div 层之间。我最终用另一个 div 包裹了现有图层，并使其与两个现有图层的背景颜色相同，并且线条不再可见。如果没有其他效果，请尝试一下。
回答by Devin G Rhode
We had a white line at the bottom of a full page iframe in iPad, so we just set the height to 100.5% and this solved the problem.
我们在 iPad 的整页 iframe 底部有一条白线，所以我们只需将高度设置为 100.5% 就解决了问题。
回答by Luis Rivera
Adding this to the block above the line worked for me very well.
将此添加到该行上方的块对我来说非常有效。
margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */
if its happening to you in too many blocks you should create a class instead.
如果它在太多块中发生在你身上，你应该创建一个类。
回答by johnny
If the <div>is not the same color as the background and is white, this is very viewable.
Basically, the background-colorin format needs to be the same color as the <div>sitting on top of it or you will get a line.
An easy work around is to change the background-colorto match the <div>or make a tile that will cover the areas in the background where the <div>sit.
如果 与<div>背景颜色不同且为白色，则这是非常易见的。
基本上，background-color格式需要与<div>坐在它上面的颜色相同，否则你会得到一条线。
一个简单的解决方法是更改background-color以匹配<div>或制作将覆盖背景中<div>坐下区域的瓷砖。
