Edge不会在flexbox中拉伸iframe

Question

Edge不会在flexbox中拉伸iframe

Mik*_*ike 7 html css iframe flexbox microsoft-edge

将iframe在下面的演示是柔性的项目:

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
}
iframe {
  background: olive;
  flex: 1;
}

Run Code Online (Sandbox Code Playgroud)

<iframe></iframe>

Run Code Online (Sandbox Code Playgroud)

但它不包括flex容器:

如果你iframe用a 替换div,它没有问题.

这是为什么？
解决问题的正确方法是什么？

Answer 1

Sam*_*son 5

Microsoft Edge和Chrome/Firefox之间似乎存在互操作问题.在回答完这个问题后,我会立即对此提出错误,让团队进一步调查.

我立即建议是增加一个<div>绕<iframe>,弯曲那个 <div>,然后设置width和height的<iframe>来100%.我打算这样做,当我发现Chrome似乎没有像Firefox和Microsoft Edge那样调整iframe的大小.

我确实通过以下方法找到了成功:

<body>
    <div>
        <iframe src="http://bing.com"></iframe>
    </div>
    <div>
        <p>Flex item number 2</p>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

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%;
}

Run Code Online (Sandbox Code Playgroud)

结果:http://jsfiddle.net/jonathansampson/o7bvefy1/

归档时间：	10 年前
查看次数：	1643 次
最近记录：	9 年，8 月前