遇到的有关iframe的滚动条问题


今天才发现一个简单有趣的问题,有关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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM