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

我正在计划从“浮动”布局和使用 CSS 柔性框为未来的项目。我很高兴看到所有主流浏览器的当前版本似乎都支持(以这样或那样的方式) Flexbox。

我去 “由 Flexbox 解决”看了一些例子。然而，“粘脚”的例子似乎并不适用于 Internet Explorer 11。我玩了一会儿，得到了它的工作通过增加 display:flex的 <html>和 width:100%的 <body>

所以我的第一个问题是: 有人能给我解释一下这个逻辑吗？我只是随便摆弄了一下，它起作用了，但是我不太明白 为什么是怎么起作用的..。

还有一个“媒体对象”的例子，它适用于所有浏览器，除了——你猜对了—— Internet Explorer。我也试了试，但没有成功。

因此，我的第二个问题是: 有没有一种“干净”的可能性，让“媒体对象”的例子在 Internet Explorer 中工作？

300039 次浏览
小开

根据 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 的候选产品，而且不是官方的，浏览器往往会给出不同的结果，但我想这种情况在不久的将来会改变。

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

小开

你只需要 flex:1; 它将为 IE11修复问题。我第二奥迪赛。

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/

小开

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

超文本标示语言

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

看 工作演示。

  • 不要直接在 body上使用柔性布局，因为它 将通过 jQuery 插件插入的元素(自动完成，弹出, 等)。
  • 不要在容器上使用 height:100%或 height:100vh，因为页脚会粘在窗口的底部，不能适应长的内容。
  • 使用 flex-grow:1而不是 flex:1，因为 flex的 IE10和 IE11默认值是 0 0 auto而不是 0 1 auto。
小开

下面是一个使用 flex 的例子，它也可以在 Internet Explorer 11和 Chrome 中使用。

超文本标示语言

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

小开

有时候只需在样式前面加上“-ms-”即可 Like-ms-flex-flow: 行包装; 也可以让它工作。


提交答案