iframe 内嵌网页在移动端无法滚动及多滚动条问题

在移动端,iframe内嵌网页遇到无法滚动以及显示多个滚动条的问题。问题源于iframe作为内联元素与baseline对齐,导致div被撑开。解决方法包括:1) 设置iframe的vertical-align: top;2) 将父div的font-size设为0;3) 改变iframe的display属性为block。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

iframe 在手机上无法正常滚动,通过给iframe添加包裹容器,设置overflow解决,但是添加包裹容器后会导致出现两个滚动条

  • html 部分
  <div class="prev-dialog-content">
    <iframe src="https://www.baidu.com" frameborder="0" width="100%" class="prev-iframe"></iframe>
  </div>
  • css 部分
.prev-dialog-content {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; // 兼容 ios
}
.prev-dialog-content .prev-iframe {
  height: 100%;
  display: block;
 }

然而 通过给 iframe设置100%高度后,页面出现了两个滚动条,是不是有点难理解?其实和 img标签同理,iframe是内联元素,默认是跟baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。

  • 方案一:设置iframe的vertical-align:top
  • 方案二:设置父div的font-size:0
  • 方案三:改变iframe的内联元素性质,display: block
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值