如何从 iframe 内部删除多余的边距？答案

【问题标题】：How can I remove extra margin from INSIDE an iframe?如何从 iframe 内部删除多余的边距？
【发布时间】：2013-02-07 07:21:21
【问题描述】：

我目前正在网站上开发混合媒体的旋转蒙太奇。大约有 5 个图像/视频将在网站上轮流出现。该站点还使用 Ektron CMS，因此我无法确定蒙太奇中的哪些插槽是图像，哪些是视频。（视频托管在 YouTube 上。）

所以，我的问题是视频加载时与 iframe 的内边缘完全对齐，但图像在 iframe 内加载时有大约 10 像素的微小边距，这非常很糟糕，因为我们的网站布局非常精确，即使是 one 像素的微小变化也会把它搞砸。这仅出现在 FireFox 和 IE 中。我已经在 Chrome 和 Safari 中进行了测试，并且效果很好。这 4 款浏览器是我们官方支持的仅有的 4 款。

这是我的 HTML：

<head>
    <body>
      <div id="mainImage">
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage1"
        src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent">
        IFRAMES do not work in your browser</iframe>
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage2"
        src="images/default/mainImage/mainImage_02.jpg">
        IFRAMES do not work in your browser</iframe>
      </div>
    </body>
</head

CSS如下：

#mainImage iframe{position:absolute; top:0; left: 0; padding:12px 0 0 12px; display:block;}
#mainImage iframe html, body{ margin:0px; padding:0px; border:0px;}

这是网站上唯一能积极影响 iframe 显示方式的代码。

所以，我的问题是，我怎样才能摆脱 iframe 内的边距，为什么它只显示在 FireFox 和 IE 中？？？

【问题讨论】：

标签： html internet-explorer firefox iframe

【解决方案1】：

似乎marginheight 和marginwidth 也可以完成这项工作。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe。

我经常使用：

<iframe src="..."
 marginwidth="0"
 marginheight="0"
 hspace="0"
 vspace="0"
 frameborder="0"
 scrolling="no"></iframe>

【讨论】：

这比公认的答案更好地回答了这个问题，因为它还处理跨域 iframe。

【解决方案2】：

控制它的是 Iframe 内容的主体，而不是 Iframe 本身。

在 iframe 页面上使用 CSS reset（在父页面上也不会受到伤害），一切都会好起来的。

【讨论】：

如果 iframe 的内容只是来自 YouTube 的嵌入视频或来自网络服务器的图像，那么我该如何像您上面提到的那样进行 CSS 重置？
由于为防止跨站点脚本攻击而实施的同源策略，您无法控制来自不同域的 iframe 的内容。
好吧，我不需要为 youtube 视频重置 CSS，因为它们已经可以工作（他们可能已经拥有自己的 CSS）。我遇到问题的是来自网络服务器（在同一域中）的图像。
成功了。我找到了一种将图像加载到单独页面中的方法，然后将 CSS 重置应用于该页面。然后将新页面加载到 iframe 中。