解决iframe出现滚动条问题

问题描述

假设有如下HTML结构：一个被称为.parent的父级div设置了特定的高度，内部包含一个iframe元素，希望iframe的高度能够自适应父级div的高度。然而通过浏览器观察发现，尽管父级div与iframe看起来高度相同，却出现了令人困惑的滚动条。进一步检查发现，这并非是由于padding或margin的影响。

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

问题分析

简要来说，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)可以保证兼容性

---

尽管在大多数情况下，将vertical-align设置为top可以解决这一问题，但在老旧的浏览器中，例如IE11，仍可能存在兼容性问题。通过尝试将vertical-align设置为text-top或text-bottom，可以更好地保证在各种浏览器下的兼容性。