最近遇到一个问题：用一个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。
内联对象和块级对象的区别：
内联对象：不会前后换行，不会从新的一行开始，而是从包裹它的内容一直往后走。
块级对象：前后换行，从新的一行开始往下走，不依赖于包裹他的对象。
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
