Flexbox 和 Internet Explorer 11 (display:flex in<html> ？）
[英]Flexbox and Internet Explorer 11 (display:flex in <html>?)
问题描述
I am planning to move away from "floaty" layouts and use CSS flexbox for future projects.
我计划摆脱“浮动”布局，并在未来的项目中使用 CSS flexbox。 I was delighted to see that all major browsers in their current versions seem to support (in one way or another) flexbox.我很高兴看到当前版本的所有主要浏览器似乎都支持（以一种或另一种方式）flexbox。
I headed over to "Solved by Flexbox" to look at some examples.我前往“由 Flexbox 解决”来查看一些示例。 However the "Sticky Footer" example does not seem to work in Internet Explorer 11. I played around a bit and got it to work by adding display:flex to the <html> and width:100% to the <body>然而，“粘性页脚”示例似乎在 Internet Explorer 11 中不起作用。我玩了一会儿，并通过将display:flex添加到<html>和width:100%到<body>使其工作
So my first question is: Can anybody explain that logic to me?所以我的第一个问题是：有人可以向我解释这个逻辑吗？ I just fiddled around and it worked, but I don't quite understand why it worked that way...我只是摆弄了一下，它奏效了，但我不太明白为什么它会这样工作......
Then there is the "Media Object" example that works in all browsers except for - you guessed it - Internet Explorer.然后是“媒体对象”示例，它适用于所有浏览器，除了 - 您猜对了 - Internet Explorer。 I fiddled around with that, too, but without any success.我也摆弄过这个，但没有任何成功。
My second question therefore is: Is there a "clean" possibility to get the "Media Object" example working in Internet Explorer?因此，我的第二个问题是：是否有“干净”的可能性让“媒体对象”示例在 Internet Explorer 中工作？
5 个解决方案
解决方案1
157 2014-04-05 15:54:13
According to http://caniuse.com/#feat=flexbox :根据http://caniuse.com/#feat=flexbox ：
"IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto , as per the draft spec, as of September 2013" “根据草案规范，截至 2013 年 9 月，IE10 和 IE11 的flex默认值为0 0 auto而不是0 1 auto ”
So in plain words, if somewhere in your CSS you have something like this: flex:1 , that is not translated the same way in all browsers.所以简单地说，如果你的 CSS 中的某个地方有这样的东西： flex:1 ，它在所有浏览器中的翻译方式都不同。 Try changing it to 1 0 0 and I believe you will immediately see that it -kinda- works.尝试将其更改为1 0 0 ，我相信您会立即看到它 - 有点 - 有效。
The problem is that this solution will probably mess up firefox, but then you can use some hacks to target only Mozilla and change it back:问题是这个解决方案可能会搞砸 firefox，但是你可以使用一些 hacks 来只针对 Mozilla 并将其改回来：
@-moz-document url-prefix() {
#flexible-content{
flex: 1;
}
}
Since flexbox is a W3C Candidate and not official, browsers tend to give different results, but I guess that will change in the immediate future.由于flexbox是 W3C Candidate 而不是官方的，浏览器往往会给出不同的结果，但我想这会在不久的将来发生变化。
If someone has a better answer I would like to know!如果有人有更好的答案，我想知道！
解决方案2
50 2016-09-03 09:09:10
Use another flex container to fix the min-height issue in IE10 and IE11:使用另一个 flex 容器修复 IE10 和 IE11 中的min-height问题：
HTML HTML
<div class="ie-fixMinHeight">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
CSS CSS
.ie-fixMinHeight {
display:flex;
}
#page {
min-height:100vh;
width:100%;
display:flex;
flex-direction:column;
}
#content {
flex-grow:1;
}
See a working demo .请参阅工作演示。
- Don't use flexbox layout directly on
bodybecause it screws up elements inserted via jQuery plugins (autocomplete, popup, etc.).不要直接在body上使用 flexbox 布局，因为它会搞砸通过 jQuery 插件（自动完成、弹出等）插入的元素。 - Don't use
height:100%orheight:100vhon your container because the footer will stick at the bottom of window and won't adapt to long content.不要在容器上使用height:100%或height:100vh因为页脚会粘在窗口的底部并且不会适应长内容。 - Use
flex-grow:1rather thanflex:1cause IE10 and IE11 default values forflexare0 0 autoand not0 1 auto.使用flex-grow:1而不是flex:1会导致 IE10 和 IE11 的flex默认值是0 0 auto而不是0 1 auto。
解决方案3
41 2015-08-03 11:28:19
You just need flex:1 ;你只需要flex:1 ; It will fix issue for the IE11.它将修复 IE11 的问题。 I second Odisseas.我第二个奥德赛斯。 Additionally assign 100% height to html,body elements .另外为 html,body 元素分配 100% 高度。
CSS changes: 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;
}
working url: http://jsfiddle.net/3tpuryso/13/工作网址： http : //jsfiddle.net/3tpuryso/13/
解决方案4
1 2019-06-19 13:31:11
Sometimes it's as simple as adding: '-ms-' in front of the style Like -ms-flex-flow: row wrap;有时就像在样式前添加：'-ms-' 一样简单，如 -ms-flex-flow: row wrap; to get it to work also.让它也工作。
解决方案5
0 2017-07-04 08:20:52
Here is an example of using flex that also works in Internet Explorer 11 and Chrome.下面是一个使用 flex 的示例，该示例也适用于 Internet Explorer 11 和 Chrome。
HTML 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.