自适应高度div内嵌iframe高度被撑开问题解决打赏

标题有点长,就想表达一个意思,div自适应的情况下,内部嵌入iframe,iframe边框什么的全部设置0,本以为外层div可以完美自适应,结果div在不同浏览器却生生多出3-5个像素的高度。

找了下相关文章,发现确有此问题,有人说用负的margin值,可终究不完美,终极完美解决方案竟然是给iframe加display: block,或者vertical-align: bottom。

效果如图所示:
iframe_div_1

默认情况下,设置500px高度
iframe_div_2
上级容器wrapper高度503px
iframe_div_3
而设置iframe为block后(或者vertical-align: bottom),上级容器wrapper恢复500px高度

自适应高度div内嵌iframe高度被撑开问题解决
文章《自适应高度div内嵌iframe高度被撑开问题解决》二维码
  • 微信打赏
  • 支付宝打赏

已有1条评论

  1. 何捷浪

    不错,受教了~好~萌菌网www.moejun.tv/

    2015-04-27 09:52 回复

(必填)

(必填)

(可选)