使用iPad查看网页上的薄灰色/黑色线条

问题描述：

我们发现iPad在我们的网站上显示薄的灰色/黑色线条。它似乎是移动Safari上的某种缩放伪影。我在下面提供了两个页面片段，对比调整突出了这个问题，不幸的是，由于iPad显示效果非常好，这些线条非常引人注目。使用iPad查看网页上的薄灰色/黑色线条

他们似乎来去的页面被放大，并且像的div /图像正在缩小与边缘四舍五入问题，导致与黑色混合的边缘像素。

是否有人找到解决方法或解决方法？

感谢

Line showing with no image

Line on edge of scaled PNG

看起来类似于http://*.com/questions/3903106/line-artifacts-in-mobile-safari，但对于解决方案也没有关于该问题的建议。 – stestagg 2011-01-24 17:31:56

答

我尝试了一堆补丁时移动Safari浏览器被放大以消除这些灰色十岁上下的小线，我发现最简单，最灵活的固定在这里：

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

本质上讲，你add

margin-bottom:-1px;

添加了虚线边框的元素。

针对像素精确布局的糟糕“解决方案” – ProblemsOfSumit 2013-07-30 07:24:27

答

iOS的放大似乎从图像的下一行需要一些数据（在插也许舍入误差？）。我做了一些测试，似乎是一个一致的问题。我将此报告为Apple的一个漏洞。

添加1线的背景颜色的像素的图像（或1px的填充，如果你愿意），似乎这样的伎俩。不理想但有效。

可能同样的问题Rendering borders bug in Safari mobile在Safari移动一般。

答

将此添加到该行上方的块对我非常有效。

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>坐的地方。

答

如果上述问题的答案不适合你，因为他们没有对我的工作有你不妨试试这并解决问题，我一个额外的东西：

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以及iPhone上出现1px线条。

这里是我的老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; 

}

删除 “背景色：” 已经修复了这个问题，我所有的网站。

答

我在我的标题栏的底部的灰线（仅ipad公司），并用固定它：

position:relative; 
z-index:2;

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

答

在我的特殊情况下，有问题的div不会使用margin：-1px或border tricks来固定。我有一个div：

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

- 这是一个特技创建保留其在不同宽度的比例的元素，这是因为填充顶部/底部导出从宽度的百分比。就我而言，我能够通过这个改变来解决它：

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

重要提示：值得注意的是，我发现有问题的网页的刷新，甚至改变了风格，没有删除线，甚至当我藏身*。每次他们回来时要删除这些行，我必须重新启动设备。

（体{显示：无}即不篡改证据）

答

我也有同样的问题在我的主页，这些解决方案都为我工作。在我个人的情况下，正如Johnny顶层所说的那样，背景显示在div层之间。我结束了与另一个div包装现有的图层，并使它与现有的两个图层具有相同的背景颜色，并且线条不再可见。如果没有其他的作品试试看。

答

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

使用iPad查看网页上的薄灰色/黑色线条

相关推荐