移动Safari中的线条工件

Safari在我的网站上以某种比例渲染div之间的黑线。 当它分割出一个按钮或其他两个不同div中的图像时，它会特别糟糕。 我不能把BG放在两个div的父母中，因为它们是透明的.pngs。 任何解决方案或只是处理它？

捕获问题， http：//i.stack.imgur.com/pTLki.png

TravisO也有同样的问题，我改变了页面布局的方式，原来它是一个有5行的简单表，我删除了行，只是用图像和br，仍然发生。 我试图通过CSS删除所有填充和边距，但很明显问题不在于浏览器渲染，而是通过重新采样浏览器将页面转换为适合屏幕的大小。 你可以看到我的破页：

http://www.apinkdoor.com/show/

Answer 1

TravisO，你应该摆脱你的CSS中的img造型！ 如果你只使用这个：

它应该在你的iPhone上正确呈现！

Answer 2

此问题是移动safari中重新调整背景图像以进行显示时产生的舍入错误的结果（这是一个错误： http ： //openradar.appspot.com/8684766 ）。

解决方案是将左侧右侧边缘的宽度增加1或2px。 然后相应地调整CSS，以便默认情况下不显示您添加的1或2个像素。

Answer 3

以下CSS，添加到具有指定背景图像的有问题的div中，是为我修复它的原因。 任何小于3px的东西在某些Safari缩放级别仍然会显示轻微的伪影。

 margin-top: -3px; /* for Mobile Safari dark line artifact */ padding-top: 3px; /* for Mobile Safari dark line artifact */ 

Answer 4

我发现改变了元素的背景颜色，周围的“灰色边框”对我有用。

Answer 5

将initial-scale值添加到视口metatag为我解决了这个问题。

Answer 6

在div标签中显示.png-image时遇到了类似的问题。 在图像的一侧渲染了一条很薄的（1 px）黑线。 要修复它，我必须添加以下CSS样式： box-shadow: none;