Flexbox 和 Internet Explorer 11(在 <html> 中显示:flex?) [英] Flexbox and Internet Explorer 11 (display:flex in <html>?)
问题描述
我打算摆脱浮动"布局,在未来的项目中使用 CSS flexbox.我很高兴看到当前版本的所有主要浏览器似乎都支持(以一种或另一种方式)flexbox.
I am planning to move away from "floaty" layouts and use CSS flexbox for future projects. I was delighted to see that all major browsers in their current versions seem to support (in one way or another) flexbox.
我前往由 Flexbox 解决"看一些例子.但是,粘性页脚"示例似乎在 Internet Explorer 11 中不起作用.我玩了一会儿,通过将 display:flex
添加到 和
width:100%
到 <代码><正文>代码>
I headed over to "Solved by Flexbox" to look at some examples. 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>
所以我的第一个问题是:有人可以向我解释这个逻辑吗?我只是摆弄了一下,它起作用了,但我不太明白为什么它会那样工作......
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...
然后是媒体对象"示例,它适用于所有浏览器,除了 - 您猜对了 - Internet Explorer.我也摆弄过,但没有成功.
Then there is the "Media Object" example that works in all browsers except for - you guessed it - Internet Explorer. I fiddled around with that, too, but without any success.
因此,我的第二个问题是:是否有干净"的可能性让媒体对象"示例在 Internet Explorer 中工作?
My second question therefore is: Is there a "clean" possibility to get the "Media Object" example working in Internet Explorer?
推荐答案
根据 http://caniuse.com/#feat=flexbox:
flex
的 IE10 和 IE11 默认值是 0 0 auto
而不是 0 1 auto
,根据草案规范,截至2013 年 9 月"
"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"
所以简单地说,如果你的 CSS 中的某个地方有这样的东西: flex:1
,它在所有浏览器中的翻译方式都不同.尝试将其更改为 1 0 0
,我相信您会立即看到它 - 有点 - 有效.
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. Try changing it to 1 0 0
and I believe you will immediately see that it -kinda- works.
问题是这个解决方案可能会搞砸 firefox,但是你可以使用一些技巧来只针对 Mozilla 并将其改回来:
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:
@-moz-document url-prefix() {
#flexible-content{
flex: 1;
}
}
由于 flexbox
是 W3C 候选者而非官方,浏览器往往会给出不同的结果,但我想这会在不久的将来发生变化.
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.
如果有人有更好的答案,我想知道!
If someone has a better answer I would like to know!
这篇关于Flexbox 和 Internet Explorer 11(在 <html> 中显示:flex?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!