Flexbox和Internet Explorer 11（在<html>中显示：flex？）

117

我正计划摆脱“浮夸”的布局，而将CSS flexbox用于将来的项目。我很高兴看到当前版本中的所有主要浏览器似乎都（以一种或另一种方式）支持flexbox。

我前往“ Solved by Flexbox”看一些例子。然而，“置顶页脚”的例子似乎并没有在Internet Explorer 11.我的工作起到了一下周围，并把它加了工作display:flex的<html>和width:100%在<body>

所以我的第一个问题是：有人可以向我解释这种逻辑吗？我只是摆弄它，它起作用了，但是我不太明白为什么它那样起作用...

然后是“媒体对象”示例，该示例适用于所有浏览器，但Internet Explorer除外（您猜对了）。我也随便摆弄，但没有成功。

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

— Kodekan
source

1

只是对这个老问题的更新：链接的演示在IE11上运行良好。自从被问到这三年以来，一定是一个错误修复。

— 达里尔

151

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

“IE10和IE11的默认值flex是0 0 auto而非0 1 auto，按照该规范草案，2013年9月的”

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

问题是该解决方案可能会弄乱firefox，但是您可以使用一些技巧仅将Mozilla作为目标并将其改回：

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

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

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

— 奥迪西
source

1

我认为这意味着IE10需要-ms-flex: 1 0 0;和IE11 flex: 1 0 0;..？

— Eystein 2014年

19

使用Google Chrome 39，此功能突然停止为我工作。我花了很长时间来追踪，但这是第三位数字的规格。Chrome 39不兼容flex: 1 0 0;。但是flex: 1 0 0%;（请注意 ％）或flex: 1 0 auto;会起作用。

— Eystein 2014年

是的，的确如此，它也破坏了我的一些设计！我通过简单地更改它来解决它，但flex: 1;我猜这取决于您要做什么...

— Odisseas 2014年

1

IE11的核心问题是计算方式flex-basis。 Github很好地讨论了为什么flex:1 0 100%在某些情况下可以在IE11上运行而在其他情况下flex: 1 0 0%甚至flex: 1 0 auto可以运行。您必须提前知道内容。

— P.Brian.Mackey，

从caniuse.com/#feat=flexbox，它专门下已知问题提到IE 11需要被添加到第三个参数的单元，该柔性基础属性..

— 亨利理学

49

使用另一个flex容器解决min-heightIE10和IE11中的问题：

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

观看有效的演示。

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

— 贝利格
source

3

我发现我不得不添加flex-direction: column到.ie-fixMinHeight以避免副作用。如果您没有IE特定的HTML，则可以使用.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

我知道这是2岁，但是谢谢！我一直在关注这个stackoverflow.com/a/24979148/359157，并一直努力试图弄清楚为什么Edge和Chrome可以正常工作时IE被破坏了。该heightVS min-height是关键。

— TyCobb

39

你只需要flex:1; 它将解决IE11的问题。我第二次Odisseas。另外将100％的高度分配给html，body元素。

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/

— 阿肖克·库马尔·古普塔（Ashok Kumar Gupta）
source

您能否解释一下有关此问题的更多信息：是否有“干净的”可能性让IE中的“媒体对象”示例正常工作？

— Ashok Kumar Gupta

1

这对我有用。有一两件事，我发现（因为它抓住了我了）是，如果你有一个包含元素，将display: flex;和相关风格必须适用于两者的body和集装箱：jsfiddle.net/Skateside/nezdrrkr

— 詹姆斯龙

将html高度设置为100％似乎会导致的内容main停止正常增长（至少在Chrome中为高）；如果添加足够的内容，它将超出页脚。 jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth就是现在的方式，您基本上是在告诉它增长到100％，而不是更多像素。您应该将设置html为min-height: 100%，然后再跟随您的内容

— Odisseas

谢谢！我缺少的部分实际上不是任何flex属性，而是包含元素上的height：100％（对我来说是.pusher div，因为我的站点包括一个响应式侧边栏）。

— zanther

0

这是使用在Internet Explorer 11和Chrome中也可以使用的flex的示例。

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

展开摘要

— 坏树路
source

15

请提供其他信息-而不是仅粘贴您的Html。

— 彼得

7

虽然此答案可能是正确且有用的，但如果您在其中包含一些解释以说明它如何帮助解决问题，则最好使用该解释。如果发生更改（可能不相关）导致它停止工作，并且用户需要了解它曾经如何工作，那么这在将来特别有用。

— Erty Seidohl '18年

0

有时，就像在样式之前添加：-ms-一样简单-ms-flex-flow：行换行；使它也能正常工作。

— 马塞尔·格雷（Marsel Gray）
source

3

有时，但大多数时候不是；）让我们在全球范围内

— 丢弃