Kod*_*kan 106 html css cross-browser flexbox
我打算放弃"浮动"布局,并将css flexbox用于未来的项目.我很高兴看到他们当前版本中的所有主流浏览器似乎都支持(以这种或那种方式)flexbox.
我前往"由Flexbox解决" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/来查看一些示例.然而,"粘性页脚"示例似乎在IE11中不起作用.我打了一下周围,并得到它通过增加工作display:flex的<html>和width:100%在<body>
所以我的第一个问题是:有人可以向我解释这个逻辑吗？我只是摆弄它并且它工作,但我不太明白为什么它的工作方式...
然后有"媒体对象"示例适用于所有浏览器,除了 - 你猜对了 - IE.我也在摆弄它,但没有成功.
因此,我的第二个问题是:在IE中使用"媒体对象"示例是否有"干净"的可能性？
小智 145
根据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候选人而非官方,浏览器往往会给出不同的结果,但我想这会在不久的将来发生变化.
如果有人有更好的答案,我想知道!
小智 44
使用另一个弹性容器来修复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;
}
查看工作演示.
body因为它搞砸了通过jQuery插件插入的元素(自动完成,弹出等).height:100%或height:100vh在您的容器上,因为页脚将粘在窗口的底部,不适应长的内容.flex-grow:1而不是flex:1原因IE10和IE11默认值flexARE 0 0 auto和没有0 1 auto.小智 38
你只需要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;
}
工作网址:http://jsfiddle.net/3tpuryso/13/