iframe出现滚动条问题

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

<div class="parent">
  <iframe frameborder="no" style="width:100%;height:100%;" src="https://www.oschina.net/">
  </iframe>
</div>

分析：
简单来说，iframe=inline frame它是一个内联元素，默认是baseline对齐的，iframe后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。
找到原因了，解决方案也就简单了。
第一种，设置iframe的vertical-align:top
第二种，设置父div的font-size:0，从而影响空白节点的line-height是0，从而不占据高度。
第三种，改变iframe的内联元素性质，改为块级元素，display:block

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