如何从iframe中删除额外的余量？ [英] How can I remove extra margin from INSIDE an iframe?
问题描述
因此，我的问题是，视频加载与iframe的内部边缘完全对齐，但图像加载页边距大约10px在iframe中，这是非常糟糕的，因为我们的网站布局非常精确，甚至一个一个像素的细微变化可以搞砸了。这只出现在FireFox和IE中。我已经在Chrome和Safari中测试过，效果很好。这4个浏览器是我们正式支持的唯一4个。
这是我的HTML：
< HEAD>
< body>
< div id =mainImage>
< iframe scrolling =noframeborder =0runat =serverid =MainImage1
src =http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=透明>
IFRAMES无法在您的浏览器中运行< / iframe>
< iframe scrolling =noframeborder =0runat =serverid =MainImage2
src =images / default / mainImage / mainImage_02.jpg>
IFRAMES不能在您的浏览器中运行< / iframe>
< / div>
< / body>
这个CSS如下：
#mainImage iframe {position：absolute;顶部：0;左：0; padding：12px 0 0 12px; display：block;}
#mainImage iframe html，body {margin：0px;填充：0像素; border：0px;}
这是网站上唯一一个主动影响iframe显示。
所以，我的问题是，我怎么能摆脱iframe内的边缘，为什么它只显示在FireFox和IE ???
使用iframe页面上的 CSS重置（这不会伤害父母页面），一切都会好的。
I am currently developing a rotating montage of mixed media on a website. There are about 5 images/videos that will appear in rotation on the site. The site also uses the Ektron CMS, so there is no way that I can determine which slots in the montage will be images and which will be videos. (The videos are hosted on YouTube.)
So, my problem is that the videos load perfectly aligned with the inside edge of the iframe, but the images load with a slight margin of about 10px INSIDE the iframe which is very bad because our site is laid out very precisely and a slight variation of even one pixel can mess it up. This only appears in FireFox and IE. I've tested in Chrome and Safari and it works perfectly. These 4 browsers are the only 4 that we officially support.
Here's my 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
The CSS is as follows:
#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;}
This is the only code on the site that actively affects the way that the iframes display.
So, my question is, how can I get rid of that margin inside the iframe and why does it only display in FireFox and IE???
It's the body of the Iframe content that controls this, not the Iframe itself.
Use a CSS reset on the Iframe pages (it won't hurt on the parent page either) and all will be well.
这篇关于如何从iframe中删除额外的余量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
