最近在项目项目中发现了一个问题,其实这个问题以前碰到过多次,只是一直没有找到原因,今天特意做一下记录。
代码如下:
<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="650">
<div id="left">
<iframe id="cmsMenuFrame" name="cmsMenuFrame" src="${ctx}/cms/tree" style="overflow:visible;"
scrolling="yes" frameborder="no" width="100%"></iframe>
</div>
<div id="openClose" class="close"> </div>
<div id="right">
<iframe id="cmsMainFrame" name="cmsMainFrame" src="${ctx}/cms/none" style="overflow:visible;"scrolling="yes" frameborder="no" width="100%"></iframe>
</div>
</iframe>
当我设置这些iframe height:100%的时候,第一个iframe总是会出现滚动条;
随后我发现iframe的父级容器div总是会比iframe大5px。
如果要解决问题的话,可以在父级div中设置高度,但是如果父级div还有div嵌套的话,这样层层设置就很冗余了。
随后在网上寻找解决方案,div包裹的iframe有5px的高度差问题
2016年10月13日更新:
这个问题产生的原因是什么呢?
网上说html规范导致的,如果是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
这样是没问题的。
而使用html5标签
<!DOCTYPE html>
<html>
就会相差几个像素;
其实不一定就是5个像素,相差的像素取决于行内高度。
为什么这么说呢?因为上面的原因并不是导致这样问题的真正根源。
真正的原因是iframe在html5中的是一个行内样式(display: inline),虽然并没有写出来,但是表现出来的就是一个行内样式。
这也是为什么给iframe设置dispaly:block;或者vertical-align:bottom或者给外层div设置font-size:0就可以让空白空间消失了。img和外层div也有这个问题,也可以这样解决。
感谢张鑫旭大牛的文章,让我明白了这个问题。推荐他的文章: