Flexbox和Internet Explorer 11（显示：flex在<html>？中）
我打算从“浮动”的布局，并使用CSS Flexbox的未来项目。 我很高兴看到目前版本中的所有主stream浏览器似乎都支持（以某种方式）flexbox。
我前往“由Flexbox解决” http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/看看一些例子。 然而，“粘滞页脚”的例子似乎并没有在IE11中工作。 我玩了一下，并得到它的工作，通过添加display:flex到<html>和width:100%到<body>
所以我的第一个问题是：有人可以向我解释这个逻辑吗？ 我只是摆弄，它的工作，但我不太明白为什么这样工作…
然后是“媒体对象”的例子，适用于所有的浏览器，除了 – 你猜对了 – IE。 我也摆弄着这个，但是没有成功。
因此，我的第二个问题是：是否有一个“干净”的可能性来获得“媒体对象”的例子在IE中工作？
根据http://caniuse.com/#feat=flexbox ：
“根据草案规范，IE10和IE11的flex默认值是0 0 auto而不是0 1 auto ，截至2013年9月”
所以用简单的话来说，如果你的CSS中有某处是这样的： flex:1 ，那么在所有浏览器中的翻译方式都不一样。 尝试改变它到1 0 0 ，我相信你会立即看到它 – kinda-作品。
问题是，这个解决scheme可能会搞砸Firefox，但是你可以使用一些黑客攻击目标Mozilla并将其改回：
@-moz-document url-prefix() { #flexible-content{ flex: 1; } }
由于flexbox是一个W3C候选人，而不是官方，浏览器往往会给出不同的结果，但我想这将在不久的将来改变。
如果有人有更好的答案，我想知道！
使用另一个柔性容器来修复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; }
看到一个工作演示 。
- 不要直接在
body上使用flexbox布局，因为它搞砸了通过jQuery插件插入的元素（自动完成，popup等）。 - 不要在容器上使用
height:100%或height:100vh，导致页脚粘在窗口底部，不适应长时间的内容。 - 使用
flex-grow:1而不是flex:1导致IE10和IE11对于flex默认值为0 0 auto而不是0 1 auto。
你只需要flex:1 ; 它将解决IE11的问题。 我第二次Odisseas。 另外给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; }
工作url： http : //jsfiddle.net/3tpuryso/13/
<!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>
