IE 10-11 flex-basis属性的行为与webkit浏览器不同 [英] IE 10-11 flex-basis property behaves differently than webkit browsers
问题描述
我尝试使用媒体对象 ,由 Media-body
和一个 Media-figure
组成。 HTML和类遵循这种形式(顺序应该不重要)。
.Media
.Media-figure
.Media-body
简单的CSS(无前缀):
.Media {
。添加这个(或者省略0)在IE中给你预期的行为:更新的小提琴
display:flex
}
.Media-figure {
flex:0 0 auto;
/ *与...相同
flex-grow:0;
flex-shrink:0;
flex-basis:auto;
* /
}
.Media-body {
flex:1 1 0;
/ *与...相同
flex-grow:1;
flex-shrink:1;
flex-basis:0;
$ b $ p
$ b请注意,我正在调整
$ b $对于Media-figure
flex-shrink factor为0(与我发布的链接相反)。我假设Media-figure
是一些固定的大小,如果我们的空间太小,我们宁可不要把它缩小。Media-body
,b
使用
flex-basis:0
应该设置元素为没有初始大小,然后允许它占用剩下的可用空间,因为它是flex-grow:1
的唯一元素。但是,在IE10-11中,flex-basis:0
会导致Media-body
宽度为内部元素,并破坏任何包装行为,如果内容太多。
http://jsfiddle.net/sgardn04/3enpp4wg/
(注意:如果您使用chrome查看这些内容,我现在的解决方法是设置
Media-body {flex-1}。使用IE10-11!基础:自动}
,这似乎工作。我在这里假设IE是错误的,因为我更喜欢webkit浏览器的行为。是否有支持IE渲染的规范的合法解释?或者,根据我在这里定义的类,我们可以预期webkit浏览器会有不同的行为?这两个属性似乎在这种情况下完全相同。
编辑:我发现这个方便的图形,这似乎表明
flex-basis
属性决定了空间分布在元素宽度之前还是之后(flex-basis:0
vsflex-basis: auto
)。解决方案差异是由于< C $ C>柔性基础
$ b $flex
的MDN文档提到了这一点:
0 的首选大小必须有一个单位
,以避免被解释为灵活性。当
省略时,默认为0%。
I'm trying to use the Media object, consisting of a
Media-body
and aMedia-figure
. The HTML and classes follow this form (order shouldn't matter)..Media .Media-figure .Media-body
The simple CSS is (no prefixes):
.Media { display: flex } .Media-figure { flex: 0 0 auto; /* same as... flex-grow: 0; flex-shrink: 0; flex-basis: auto; */ } .Media-body { flex: 1 1 0; /* same as... flex-grow: 1; flex-shrink: 1; flex-basis: 0; */ }
Notice that I'm tweaking the
Media-figure
flex-shrink factor to be 0 (as opposed to the link I posted). I'm assuming that theMedia-figure
is some fixed size, and we'd rather not make it smaller if we have too little room.Using
flex-basis: 0
for theMedia-body
should set the element to have no initial size, which then allows it to consume the rest of the available space since it is the only element withflex-grow: 1
. However, in IE10-11, theflex-basis: 0
causes theMedia-body
width to be that of the interior elements, and destroys any wrapping behavior if there is too much content.http://jsfiddle.net/sgardn04/3enpp4wg/
(Note: if you view these in chrome, they'll look exactly the same. Use IE10-11!)
My current workaround is to set the
Media-body { flex-basis: auto }
, which seems to work. I make the assumption that IE is at fault here, since I like the behavior of the webkit browsers better. Is there a legitimate interpretation of the spec that supports IEs rendering? Or any case where we could expect different behavior for webkit browsers based on the classes I have defined here? The two properties seem to behave exactly the same in this case.EDIT: I found this handy graphic, which seems to suggest that the
flex-basis
property determines whether the space is distributed before or after the width of the elements is taken into account (flex-basis: 0
vsflex-basis: auto
).解决方案The difference is due to not having a unit on the value of
flex-basis
. Adding this (or omitting the 0) gives you the expected behaviour in IE: updated fiddleThe MDN documentation on
flex
mentions this:A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0% when omitted.
这篇关于IE 10-11 flex-basis属性的行为与webkit浏览器不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!