加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 如何从INSIDE中移除额外的边距?

发布时间:2020-12-14 23:41:37 所属栏目:资源 来源:网络整理
导读:我目前正在网站上开发混合媒体的旋转蒙太奇.大约有5个图像/视频将在网站上轮流显示.该网站还使用了Ektron CMS,因此无法确定蒙太奇中的哪些插槽是图像,哪些是视频. (视频托管在YouTube上.) 所以,我的问题是视频加载与iframe的内边缘完全对齐,但是图像在iframe
我目前正在网站上开发混合媒体的旋转蒙太奇.大约有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中?

解决方法

它是控制此内容的Iframe内容的主体,而不是Iframe本身.

在Iframe页面上使用CSS reset(在父页面上也不会受到伤害),一切都会很好.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读