iFrame 仅在移动 Safari 中显示灰线答案

【问题标题】：iFrame showing a grey line in mobile safari onlyiFrame 仅在移动 Safari 中显示灰线
【发布时间】：2011-08-23 23:19:10
【问题描述】：

我设计了一个简单的公司网站，并花费了更多的时间来尝试调试这个渲染问题，而不是让东西在 PHP 中正常工作！

我有一个 iframe。在所有其他浏览器（甚至桌面上的 Safari）上，它可以正确呈现，但在 Safari 移动设备上，iFrame 的边框上有一条细灰线 - 但仅限于某些缩放级别。我阅读了其他类似的帖子，这些帖子与 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 或任何东西中。

您可以查看问题here 或查看image here。

【问题讨论】：

【解决方案1】：

我在几个 PC 浏览器上尝试过，没有问题 - 所以我猜你发现了一个移动故障。

您能否将border-color attribute of the iframe 设置为与包含元素相同的绿灰色 - 或者设置为透明，看看是否可以解决问题？

【讨论】：

感谢您的快速回复。是的，它只影响 iPhone 和 iPad 上的移动 Safari。它在所有桌面浏览器（包括 Safari、IE、Chrome 和 Firefox）上都能正常工作。如果我将边框颜色设置为 bg，那么右侧会有一条浅绿色线，因为那是与 bg 不同的颜色。
@Vinod 你可以尝试将背景和边框颜色设置为“透明”吗？
我为此找到了一个技巧——我并不为此感到自豪。我只是拿了一个 div 并将那个 div 设置为 bg 颜色。我必须使它大约 5 像素左右 - 出于某种原因，它仍然出现了 1 px div。它已经解决了——但这是一种非常非常愚蠢的修复方法——我只是想不出别的。我确实尝试将边框更改为“透明”，但这也无济于事。
@Vinod 很高兴你找到了答案——我打算建议你覆盖一个与颜色匹配的 z-index 值更高的 div，但我真的很惊讶透明没有不工作。但是作为奖励，现在您已经完成了一项您并不为之自豪的黑客操作，您已经真正准备好开始设计电子邮件广告系列了！现在这涉及到真正的 hacky CSS。
@VinodTonangi 你能解释一下你做了什么来解决这个问题吗？

【解决方案2】：

overflow: hidden; 解决问题！

【讨论】：