Question

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

所以，我的问题是视频加载与iframe的内边缘完全对齐，但图像加载的内容边缘约为10px，因为我们的网站非常布局非常精确，甚至一个像素的微小变化都会使它变得混乱。这只出现在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中？

Answer 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>

Answer 2

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

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

如何从INSIDE iframe中删除额外的保证金？

2 个答案: