最近在使用iframe时候遇到一个不大不小的问题:用一个div包裹一个iframe,但无论如何,div的高度都比iframe高了4px。百思不得其解,后来在网上多方查找,才发现问题的根源所在。
那么究竟是什么问题导致了这个情况的发生呢?没错,就是应为它;请看!
当然有问题就要解决,解决的具体方案就是给iframe添加属性:vertical-align:bottom;或者display:block;
原理就是:
vertical-align:bottom;表示把元素的顶端与行中最低的元素的顶端对齐。即是以元素底线作为与父元素垂直对齐的基线。
display:block;表示将元素转换为块级元素。iframe本身是一个内联框架,他本身是从div中分出了一部分空间,作为自己的空间,而将其转换为块级对象时,他就会自己从新的一行开始显示内容,而不依赖于div。