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 {
 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 
请注意，我正在调整 Media-figure  flex-shrink factor为0（与我发布的链接相反）。我假设 Media-figure 是一些固定的大小，如果我们的空间太小，我们宁可不要把它缩小。
 $ b $对于 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  vs  flex-basis： auto ）。
解决方案
差异是由于< C $ C>柔性基础。添加这个（或者省略0）在IE中给你预期的行为：更新的小提琴 
 
 $ b $  flex 的MDN文档提到了这一点： 
 
 
 
 
 0 的首选大小必须有一个单位
，以避免被解释为灵活性。当
省略时，默认为0％。
 
 
I'm trying to use the Media object, consisting of a Media-body and a Media-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 the Media-figure is some fixed size, and we'd rather not make it smaller if we have too little room.


Using flex-basis: 0 for the Media-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 with flex-grow: 1. However, in IE10-11, the flex-basis: 0 causes the Media-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 vs flex-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 fiddle 

The 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屋！