删除额外的空白周围的iframe?

我在页面中使用iframe,并且偶然发现了一个奇怪的问题。 我像这样设置iframe CSS

iframe { margin: none; padding: none; background: blue; /* this is just to make the frames easier to see */ border: none; } 

但是,iframe中仍然有空白。 我在Chrome和Firefox上都testing过,结果是一样的。 我四处搜寻,找不到任何东西。 Chrome控制台中也没有显示这个空格。 另外,我已经有了以下CSS:

 html, body { margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%; } 

JSFiddle: 这里

刚刚看到你的小提琴问题是因为你正在使用display:inline-block 。 这将考虑到您的html中的空白。 display:inline-block由于难以浏览器支持而臭名昭着。

选项1:尝试删除您的HTML中的空白有时可以sorting问题。

选项2:使用不同的显示属性(如display:block将确定sorting问题。 现场示例: http : //jsfiddle.net/mM6AB/3/

在使用内联元素时,空格可能来自元素所在的“行”(即基线下方的空格)。 解决的办法是把它添加到它的父元素。

 line-height: 0; 
 iframe { display:block; } 

iframe是一个内联元素

也许这个空格实际上是加载在文档中的外边距。 尝试使用以下方式对加载的文档(CSS样式化源页面 )进行样式设置:

 html, body { border: 0px; margin: 0px; padding: 0px; } 

从这里引用stackoverflow.com

我有同样的问题,我通过浮动帧元素来解决它

 iframe { margin: none; padding: none; border: none; line-height: 0; float: left; } 

尝试使用带overflow: hidden;的div overflow: hidden; 围绕<iframe> ,就像

 <div style="height: 29px; overflow: hidden;"> <iframe frameborder=0 allowtransparency=yes scrolling=no src="../hng_frames/copyright_part.html" width="980" height="30"> <p>Your browser does not support iframes.</p> </iframe> </div> 

试试html, body {margin:0px;}

没有你的html内容就难以解决,但试试这个:

 iframe { margin: 0px !important; padding: 0px !important; background: blue; /* this is just to make the frames easier to see */ border: 0px !important; } html, body { margin: 0px !important; padding: 0px !important; border: 0px !important; width: 100%; height: 100%; } 

添加!important将强制风格,因为我的猜测是你的风格是相互覆盖。