Flexbox 和 Internet Explorer 11 (display:flex in <html>?)答案

【问题标题】：Flexbox and Internet Explorer 11 (display:flex in <html>?)Flexbox 和 Internet Explorer 11 (display:flex in <html>?)
【发布时间】：2014-03-03 05:56:07
【问题描述】：

我计划放弃“浮动”布局，并在未来的项目中使用 CSS flexbox。我很高兴看到当前版本的所有主要浏览器似乎都支持（以某种方式）flexbox。

我前往"Solved by Flexbox" 查看一些示例。但是，“粘滞页脚”示例似乎在 Internet Explorer 11 中不起作用。我玩了一下，通过将 display:flex 添加到 <html> 和 width:100% 到 <body> 来让它工作

所以我的第一个问题是：谁能向我解释这个逻辑？我只是摆弄了一下，它起作用了，但我不太明白为什么它会那样工作......

还有一个适用于所有浏览器的“媒体对象”示例，除了 - 您猜对了 - Internet Explorer。我也摆弄了一下，但没有任何成功。

因此，我的第二个问题是：是否有“干净”的可能性让“媒体对象”示例在 Internet Explorer 中运行？

【问题讨论】：

只是对这个老问题的更新：链接的演示在 IE11 上运行良好。必须是自提出此问题以来的 3 年内修复的错误。

标签： html css flexbox cross-browser

【解决方案1】：

根据http://caniuse.com/#feat=flexbox：

“根据草案规范，截至 2013 年 9 月，flex 的 IE10 和 IE11 默认值为 0 0 auto 而不是 0 1 auto”

因此，简单来说，如果您的 CSS 中某处有类似这样的内容：flex:1，则在所有浏览器中的翻译方式不同。尝试将其更改为 1 0 0，我相信您会立即看到它 - 有点 - 工作。

问题是这个解决方案可能会搞砸 firefox，但是你可以使用一些技巧来仅针对 Mozilla 并将其改回：

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

由于flexbox 是 W3C 候选人而不是官方的，浏览器往往会给出不同的结果，但我想这会在不久的将来改变。

如果有人有更好的答案我想知道！

【讨论】：

我认为这意味着 IE10 需要 -ms-flex: 1 0 0; 和 IE11 flex: 1 0 0;..？
使用 Google Chrome 39 这突然停止了对我的工作。我花了很长时间才找到，但这是第三位数的规格。 Chrome 39 不遵守flex: 1 0 0;。但是flex: 1 0 0%; (注意 %) 或flex: 1 0 auto; 会起作用。
是的，这是真的，它也破坏了我的一些设计！我通过简单地将其更改为 flex: 1; 来修复它我想这取决于你的目标，虽然......
IE11 的核心问题是它计算flex-basis 的方式。 Github 很好地讨论了为什么 flex:1 0 100% 在某些情况下适用于 IE11 而 flex: 1 0 0% 甚至 flex: 1 0 auto 在其他情况下适用。你必须提前知道内容。
来自caniuse.com/#feat=flexbox，在已知问题下特别提到IE 11需要在第三个参数flex-basis属性中添加一个单位..

【解决方案2】：

使用另一个 flex 容器修复 IE10 和 IE11 中的 min-height 问题：

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

查看working demo。

不要直接在 body 上使用 flexbox 布局，因为它搞砸通过 jQuery 插件插入的元素（自动完成，弹出窗口，等）。
不要在您的容器上使用height:100% 或height:100vh，因为页脚会粘在窗口底部并且无法适应长内容。
使用flex-grow:1 而不是flex:1，因为flex 的IE10 和IE11 默认值为0 0 auto 而不是0 1 auto。

【讨论】：

我发现我必须将flex-direction: column 添加到.ie-fixMinHeight 以避免副作用。如果您没有 IE 特定的 HTML，您可以使用 .fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }
我知道这是 2 岁，但谢谢！我一直在关注这个stackoverflow.com/a/24979148/359157，并一直在努力找出为什么 IE 被破坏，而 Edge 和 Chrome 却完美无缺。 height 与 min-height 是关键。

【解决方案3】：

你只需要flex:1;它将解决 IE11 的问题。我第二个奥德西斯。 另外为 html、body 元素分配 100% 的高度。

CSS 更改：

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

工作网址：http://jsfiddle.net/3tpuryso/13/

【讨论】：

您能否详细解释一下这个问题：是否有“干净”的可能性让“媒体对象”示例在 IE 中工作？
这对我有用。我发现的一件事（因为它抓住了我）是，如果你有一个包含元素，display: flex; 和相关的样式必须应用于 both body 和容器：jsfiddle.net/Skateside/nezdrrkr
将 html 高度设置为 100% 似乎会导致 main 的内容停止正常增长（至少在 chrome 中）；如果您添加足够的内容，它将超出页脚。 jsfiddle.net/3tpuryso/65
@FoolishSeth 现在你基本上是在告诉它增长到 100%，而不是一个像素。您应该将 html 设置为 min-height: 100%，以跟随您的内容
谢谢！对我来说缺少的部分实际上不是任何 flex 属性，而是包含元素上的 height:100% （对我来说这是一个 .pusher div，因为我的网站包含一个响应式侧边栏）。

【解决方案4】：

有时就像在样式前面添加：'-ms-' 一样简单像 -ms-flex-flow: 换行；让它也能工作。

【讨论】：

有时，但大多数时候不是 ;) 让我们在全球范围内转储 IE

【解决方案5】：

这是一个使用 flex 的示例，它也适用于 Internet Explorer 11 和 Chrome。

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

【讨论】：

请提供更多信息 - 而不是仅仅粘贴您的 Html。
虽然这个答案可能是正确且有用的，但最好在其中附上一些解释来解释它如何帮助解决问题。如果有更改（可能不相关）导致它停止工作并且用户需要了解它曾经是如何工作的，这在未来变得特别有用。