您的位置：首页 > 其它

div包裹的iframe有5px的高度差问题

2015-09-07 14:47 351 查看
最近遇到一个问题：用一个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" 
		onload="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。

内联对象和块级对象的区别：

内联对象：不会前后换行，不会从新的一行开始，而是从包裹它的内容一直往后走。

块级对象：前后换行，从新的一行开始往下走，不依赖于包裹他的对象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航