边缘浏览器无法在 flexbox 中拉伸 iframe。

Question

边缘浏览器无法在 flexbox 中拉伸 iframe。

6

以下演示中的 iframe 是一个弹性项目：

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

<iframe></iframe>

但它并没有涵盖flex容器:

如果你用

代替

- user4351667

<iframe> 对我来说很灵活；你测试的是哪个版本的 Edge？ - Sampson

刚刚添加了截图。 - user4351667

好的，另一个解决方法的想法是：你说当你使用 div 时它可以工作，所以将 iframe 放入一个 div 中，将 div 定位为相对位置，然后将 iframe 绝对定位在其中，将 top/left/right/bottom 都设置为 0。 - CBroe

3

@Hermes，肯定有几种解决方法，但这是Edge和Chrome / Firefox之间的互操作性问题。因此，我将提交一个错误报告供团队评估。感谢您提供这个信息。 - Sampson

@CBroe：感谢您的建议，但似乎不起作用。我开了一个新的线程，因为它似乎与原始问题不同：http://stackoverflow.com/questions/34102990/iframe-vs-div-in-absolute-positioning - user4351667

显示剩余5条评论

2个回答

2

解决方案是在iframe中添加min-height: 100%;。

* {
  margin: 0;
  border: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
}

iframe {
  background: olive;
  flex: 1;
  min-height: 100%;
}

<iframe></iframe>

- Indrek Paas

可能对于这个简单的示例可以工作，但是如果您向页面添加其他元素和容器，则无法将“min-height: 100%;”应用于“iframe”。 - Mori

只要iframe是flex容器中唯一的flex项，上述解决方案在任何情况下都能正常工作。 - Indrek Paas

只要 iframe 是 flex 容器中唯一的 flex 项，我就不担心这个问题。但是在我的实际网站中并非如此。 - Mori

Flex容器（在这种情况下带有嵌套的iframe）可以成为另一个Flex上下文中的Flex项。 - Indrek Paas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

微软Edge和Chrome/Firefox之间存在互操作性问题。在回答这个问题之后，我会立即提交一个错误报告，并让团队进一步调查。我的直接建议是在<iframe>周围添加一个<div>，弹性地设置那个<div>，然后将<iframe>的width和height设置为100%。我试图这样做，但注意到Chrome似乎不像Firefox和Microsoft Edge那样调整iframe的大小。我用以下方法取得了成功：

<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/