我使用了经典的响应式设计技巧,即对元素应用基于百分比的padding-bottom和零高度,以使其保持一定的长宽比。在这个元素中有一个iframe,其高度为100%。
这在chrome中是可行的,但是firefox和IE没有显示iframe,好像它没有高度一样我试过将box-sizing: content-box作为IE的解决方案,但没有成功。
小提琴:http://jsfiddle.net/jgsnK/
如何使iframe在其他浏览器中的行为与chrome相似?

最佳答案

你需要做的是在你的iframe上使用position:absolute;position:relative;来定位你的.wrapper

.wrapper {
    position:relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
}
.frame {
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width: 100%;
    height: 100%;
}

看看这个DEMO
进一步:
如果您计划在整个文档中定期执行这样的操作,我建议添加一个内部div来执行相同的功能,并使您的iframe没有绝对的位置
HTML格式
<div class="wrapper">
    <div class="abs-inner">
        <iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
    </div>
</div>

CSS
.wrapper {
    position:relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
}
.abs-inner{
    position:absolue;
    top:0;
    right:0;
    left:0;
    bottom:0;
}
.frame {
    width: 100%;
    height: 100%;
}

像这样的DEMO

10-07 19:38
查看更多