用iPad查看网页上的灰色/黑色细线

Question

我们发现iPad在我们的网站上显示细灰/黑线。它似乎是移动Safari上某种形式的缩放 - 人工制品。我在下面提供了两个页面片段，对比调整以突出问题，不幸的是因为iPad显示效果非常好，这些线条非常明显。

当页面被缩放时，它们似乎来来往往，看起来像div / images正在缩放边缘处的圆角问题，导致边缘像素与黑色混合。

有没有人找到解决方法或修复此问题？

由于

Answer 1

我尝试了一系列修复，以便在移动safari放大时删除这些灰色的细线，我找到的最简单，最灵活的修复方法就是：

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

基本上，你添加

margin-bottom:-1px;

添加虚线边框的元素。

Answer 2

iOS缩放似乎从图像中的下一行获取一些数据（可能是插值的舍入误差？）。我做了一些测试，这似乎是一个一贯的问题。我向Apple报告这是一个错误。

在图像中添加1行背景色像素（或者如果你愿意，可以添加1px填充）似乎可以解决问题。不理想，但有效。

一般情况下，Safari Mobile上的问题可能与Rendering borders bug in Safari mobile相同。

Answer 3

如果上面的答案对你不起作用，因为它们对我来说没有用，那么你可能希望尝试一些额外的事情来解决我的问题：

border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

向底部添加边框透明边框似乎有所帮助，我的理由是它仍然尝试渲染边框，即使它是透明的，也会强制它重新渲染这些像素。然而，这是纯粹的猜想，但解决方案似乎有效！

Answer 4

由于这是由背景颜色触发的，只需使用相同背景颜色的1px gif bg图像并重复它。如果你使用modernizr，你可以这样写：

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

这也适用于显示table-cell的元素以获得vertical-align：middle。

Answer 5

我的标题栏底部有一条灰色线（仅限iPad），并用以下方法修复：

position:relative;
z-index:2;

直接添加到标头容器中。 也许这也可以帮助某人。

Answer 6

将此添加到该行上方的块中非常适合我。

margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */

如果它在太多块中发生，你应该创建一个类。

Answer 7

如果<div>颜色与背景颜色不同且为白色，则可以看到。{ 基本上，background-color格式需要与位于其上方的<div>颜色相同，否则您将得到一条线。
一个简单的解决方法是更改​​background-color以匹配<div>或制作一个覆盖<div>所在背景区域的图块。

Answer 8

我遇到了同样的问题，1px线路出现在桌面浏览器以及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;

}

删除“background-color：”修复了我的所有网站的问题。

Answer 9

在我的特定情况下，违规div不会被保证金固定：-1px或边境技巧。 我有一个div：

height: 0px; 
padding-bottom: 57.2%;

- 这是创建一个在不同宽度保留其比例的元素的技巧，因为填充顶部/底部从宽度得出百分比。在我的情况下，我能够通过将其更改为：

来修复它

height: 1px; 
padding-bottom: 57.2%;

重要提示：值得注意的是，我发现刷新了违规页面，即使更改了样式，也没有删除该行，即使我隐藏了身体*。要在每次回来时删除这些行，我必须重启设备。

• （body {display：none}即没有篡改证据）

Answer 10

我的主页也遇到了同样的问题，这些解决方案都没有对我有用。在我的特殊情况下，正如约翰尼顶部所说的那样，背景显示在div层之间。我最终用另一个div包裹现有图层，并使其与两个现有图层的背景颜色相同，并且线条不再可见。如果没有其他工作可以尝试一下。

Answer 11

我们在iPad的整页iframe底部有一条白线，所以我们只将高度设置为100.5％，这就解决了这个问题。