iFrame 摆脱白色边框答案

【问题标题】：iFrame get rid of white borderingiFrame 摆脱白色边框
【发布时间】：2017-04-19 03:27:40
【问题描述】：

这是一个屏幕截图，可以帮助解释我在问什么。

橙色是 iFrame 的总大小。绿色是 iFrame 内容大小，并且蓝色是文本（在此屏幕截图中不可见）

正如您在橙色周围看到的那样，有一个不会消失的白色边框。我已经包含以下代码试图摆脱它：

<iframe width="100%" height="60" frameBorder="0" src="http://iframeurl.html"></iframe>

这是 iframe 网页上的 CSS：

body {
    margin: 0;
    margin-top: 0;
}

如您所见，我去掉了 iFrame 中的边距（在网站上从边到边），并且在包括 iFrame 在内的网页上将边框设置为“0”。

您可以看到不应该存在的 iFrame 的白色（左侧和顶部）。我在包含 iFrame 的网页中添加了更多 CSS

.iframe, object, embed{
    width: 100%;
    height: auto;
    border:none;
}

我相信它可能是导致它的“div”标签（iFrame 的 div 标签或它上面的 div）。

【问题讨论】：

边框、填充和边距，你的空白敌人。
@James 内边距元素会去哪里？
您应该尝试使用一些 html 检查器浏览器内置工具来找出问题所在。我会尝试将填充和边距设置为零（也适用于 html 标记）。您是否为 iframe 标签设置了类属性？因为在您的 CSS 中，您使用的是 .iframe（而不是 iframe）。

【解决方案1】：

感谢大家的回复！ @filipko 我再次查看了检查器和我的 iFrame 导致它之前的 div 标签。我只是按照@James 的建议将“边框、填充和边距”更改为 0。

这是修复它的代码：

.ui-content {
padding-top: 0px;
margin-top: 0;
border-top: none;
}

.ui-content 是 iFrame 之前的 div。谢谢大家！

【讨论】：