CSS3小技巧-在div中iframe出现滚动条问题

发表于 更新于 分类于 阅读次数：

前言

父元素.parent 设定了高度，设置 iframe height：100%,通过浏览器观察发现，外层 div 与 iframe 高度相同，为什么出现滚动条，发现没有 padding/margin 的影响。

1
2
3
<div class="parent">
  <iframe frameborder="no" style="width:100%;height:100%;" src=""></iframe>
</div>

解决方法

简单来说，iframe=inline frame 它是一个内联元素，默认是 baseline 对齐的，iframe 后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe 与空白节点的基线对齐，导致了 div 被撑开，从而出现滚动条。 找到原因了，解决方案也就简单了。

  1. 第一种，设置 iframe 的 vertical-align:top
  2. 第二种，设置父 div 的 font-size:0，从而影响空白节点的 line-height 是 0，从而不占据高度。
  3. 第三种，改变 iframe 的内联元素性质，改为块级元素，display:block

最后发现是 vertical-align:baseline 导致的，改为 top 后正常，但是在 IE110 中仍旧存在问题 经尝试 vertical-align:text-top(text-bottom)可以保证兼容性