iFrame在移动版Safari中显示灰线

Question

我设计了一个简单的企业网站，但是我花费的时间在调试渲染问题上比在PHP方面的正确工作上花费的时间还多！

我有一个iframe。在所有其他浏览器（甚至桌面版Safari）中都可以正确呈现，但在Safari移动版中，只有在某些缩放级别下，边框上会出现一条细灰线。我阅读了其他类似的帖子，这些帖子与2个div相互接触有关，但我的iFrame没有被包含在div中。

相关的CSS：

iframe.noBorder {
  border: none;
  border:0;
}

实际的iFrame嵌入代码：

<iframe class="noBorder1" src="header.html" width=980 height="160" frameborder="0" border="0" scrolling="no" ></iframe>

就像我说的那样，它没有在任何div中。

你可以在这里看到问题，或者查看这里的图片。

- Vinod Tonangi

Answer 1

overflow: hidden; 解决了这个问题！

- JPguitar

Answer 2

我在几台电脑浏览器上尝试了这个，没有问题 - 所以我猜你发现了一个移动设备的故障。

你能把 iframe 的 border-color 属性 设置为与包含元素相同的灰绿色，或者设置为透明，看看是否可以解决问题吗？

- amelvin

---

感谢您的快速回复。是的，它只影响iPhone和iPad上的移动Safari。在所有桌面浏览器（包括Safari、IE、Chrome和Firefox）中都能正常工作。如果我将边框颜色设置为背景颜色，那么右侧会有一条浅绿色线，因为那是与背景不同的颜色。 - Vinod Tonangi

@Vinod，你能试着将背景和边框颜色设置为“透明”吗？ - amelvin

我找到了一个解决方法，但并不是真正引以为豪的。我只是拿了一个 div 并将其设置为背景色。我不得不将它设置为大约 5 像素左右 - 因为使用 1 像素的 div 仍然会显示出来。问题已经解决了，但这种修复方式真的非常愚蠢 - 我真的想不出其他办法了。我确实尝试了将边框设为“透明”，但也没有帮助。 - Vinod Tonangi

@Vinod，很高兴你找到了答案——我本来想建议你叠加一个z-index值更高的div来匹配颜色，但我真的很惊讶透明度没有起作用。但是现在你已经做了一个不太光彩的hack，你真正准备好开始设计电子邮件活动了！那需要真正的hacky CSS。 - amelvin

@VinodTonangi，你能解释一下你是怎么修复这个问题的吗？ - Matt Hudson

@VinodTonangi - “我只是简单地取了一个div，然后将该div设置为背景颜色” - 这是什么意思？你取了一个div？你从哪里取的？放到哪里去了？如何将元素“制作”成背景颜色？背景颜色是什么？ - Daniel Earwicker