标题有点长,就想表达一个意思,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高度