首页 > 技术文章 > 遇到的有关iframe的滚动条问题

liliy-w 2018-12-19 16:22 原文

今天才发现一个简单有趣的问题,有关iframe的;

<div style="height: 800px;overflow: auto;">
    <iframe src="" width="" height="100%" frameborder="0" scrolling="no"></iframe>
</div>

此时div出现了滚动条,百思不得其解,原来还是老问题,就是因为iframe是行内元素,后面的

空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条

解决方案

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

 

推荐阅读