关于iFrame高度小于父元素DIv3~5px的解决方案

最近在使用iframe时候遇到一个不大不小的问题:用一个div包裹一个iframe,但无论如何,div的高度都比iframe高了4px。百思不得其解,后来在网上多方查找,才发现问题的根源所在。


那么究竟是什么问题导致了这个情况的发生呢?没错,就是应为它;请看!

当然有问题就要解决,解决的具体方案就是给iframe添加属性:vertical-align:bottom;或者display:block; 

原理就是:

vertical-align:bottom;表示把元素的顶端与行中最低的元素的顶端对齐。即是以元素底线作为与父元素垂直对齐的基线。

display:block;表示将元素转换为块级元素。iframe本身是一个内联框架,他本身是从div中分出了一部分空间,作为自己的空间,而将其转换为块级对象时,他就会自己从新的一行开始显示内容,而不依赖于div。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,630评论 0 26
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 5,020评论 8 34
  • 很可惜在中国过去这些年里,传统意义上的媒体监督能力被破坏了。《东方早报》将在2017的第一天停刊,它是最早报道三聚...
    王道明阅读 1,078评论 0 87