Edge无法在Flexbox中拉伸iframe [英] Edge doesn't stretch iframe in a flexbox
问题描述
以下演示中的iframe是一个弹性项目:
The iframe in the following demo is a flex item:
* {
margin: 0;
border: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
iframe {
background: olive;
flex: 1;
}
<iframe></iframe>
但是它没有覆盖flex容器:
But it doesn't cover the flex container:
如果将iframe替换为div，则可以正常使用.
If you replace iframe with a div, it works with no problem.
- 那是为什么?
- 什么是解决问题的正确方法?
推荐答案
Microsoft Edge和Chrome/Firefox之间似乎确实存在互操作问题.回答此问题后，我将立即对此提交一个错误，并让团队进行进一步调查.
There does appear to be an interop issue between Microsoft Edge, and Chrome/Firefox. I'll file a bug on this immediately after answering this question, and have the team investigate further.
我的直接建议是在<iframe>周围添加<div>，弯曲那个 <div>，然后将<iframe>的width和height设置为100%. 我打算这样做，当我发现Chrome似乎不像Firefox和Microsoft Edge可以.
My immediate suggestion would be to add a <div> around the <iframe>, flex that <div>, and then set the width and height of the <iframe> to 100%. I set out to do this, when I noticed Chrome appears to not size the iframe like Firefox and Microsoft Edge do.
通过以下方法，我确实找到了成功:
I did find success with the following approach:
<body>
<div>
<iframe src="http://bing.com"></iframe>
</div>
<div>
<p>Flex item number 2</p>
</div>
</body>
html, body, div, iframe {
border: 0; padding: 0; margin: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
}
div {
flex: 1;
position: relative;
}
iframe {
position: absolute;
width: 100%; height: 100%;
}
结果: http://jsfiddle.net/jonathansampson/o7bvefy1/
这篇关于Edge无法在Flexbox中拉伸iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
