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

被折叠的 条评论
为什么被折叠?



