Flexbox和Internet Explorer 11(显示:flex in< html> ;?) [英] 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.
我转到Solbox by Flexbox< a href =http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/> http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 来看一些例子。但是Sticky Footer示例在IE11中似乎不工作。我通过向< html>
和<$添加 display:flex
c $ c> width:100%到< body>
I headed over to "Solved by Flexbox" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ to look at some examples. However the "Sticky Footer" example does not seem to work in IE11. I played around a bit and got it to work by adding display:flex
to the <html>
and width:100%
to the <body>
我的第一个问题是:有人可以向我解释这个逻辑吗?我只是fiddled周围,它的工作,但我不太明白为什么它这样工作...
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...
然后有媒体对象所有浏览器除了 - 你猜到了 - IE。
Then there is the "Media Object" example that works in all browsers except for - you guessed it - IE. I fiddled around with that, too, but to no success.
我的第二个问题是:有一个干净的可能性,以获得媒体对象的例子工作in IE?
My second question therefore is: Is there a "clean" possibility to get the "Media Object" example working in IE?
推荐答案
根据 http ://caniuse.com/#feat=flexbox :
IE10和IE11默认值 flex
是 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(显示:flex in< html> ;?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!