10

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

所以，我的问题是视频加载时与 iframe 的内边缘完全对齐，但图像在 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 中？？？

4

2 回答 2

29

它似乎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>
于 2014-06-26T08:48:54.653 回答
2

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

在 iframe 页面上使用CSS 重置（它也不会对父页面造成伤害），一切都会好起来的。

于 2013-02-21T20:09:47.583 回答