最近遇到一个问题:用一个div包裹一个iframe,但无论如何,div的高度都比iframe高了5px。百思不得其解,后来在网上多方查找,才发现问题的根源所在。
问题:div高度大于iframe高度5px左右。
<div id="iframeContent">
<iframe id="iframe" name="iframe" src="home.html" style="width:100%;" frameborder="0" scrolling="no"
οnlοad="iframeHeight();"></iframe>
</div>
问题原因:使用了HTML5的头部,在使用如下两个头部声明时会使iframe不能填满div,从而产生5px的高度差。
1.<!DOCTYPE html>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
解决方案:在为iframe添加属性:vertical-align:bottom;或者display:block;
其中vertical-align:bottom;表示把元素的顶端与行中最低的元素的顶端对齐。即是以元素底线作为与父元素垂直对齐的基线。
display:block;表示将元素转换为块级元素。iframe本身是一个内联框架,他本身是从div中分出了一部分空间,作为自己的空间,而将其转换为块级对象时,他就会自己从新的一行开始显示内容,而不依赖于div。
内联对象和块级对象的区别:
内联对象:不会前后换行,不会从新的一行开始,而是从包裹它的内容一直往后走。
块级对象:前后换行,从新的一行开始往下走,不依赖于包裹他的对象。