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

最新推荐文章于 2020-09-30 16:20:59 发布

转载最新推荐文章于 2020-09-30 16:20:59 发布 · 666 阅读

本文探讨了在HTML5中使用div包裹iframe时出现的高度偏差现象，详细解析了问题成因，涉及到HTML5文档类型声明的影响，并提供了两种有效的解决方案：通过调整iframe的vertical-align属性或设置display属性为block。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到一个问题：用一个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" 
		"iframeHeight();"></iframe>
</div>

问题原因：使用了HTML5的头部，在使用如下两个头部声明时会使iframe不能填满div，从而产生5px的高度差。

<!DOCTYPE html>
<!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。

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

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

原文链接：https://blog.youkuaiyun.com/mafan121/article/details/48264927