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

 

相关文章:

  • 2021-11-15
  • 2022-12-23
  • 2022-01-16
  • 2022-12-23
  • 2022-12-23
  • 2021-09-22
  • 2022-12-23
  • 2021-10-04
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-18
  • 2021-08-05
  • 2021-07-19
相关资源
相似解决方案