IE 10-11 flex-basis 属性的行为与 webkit 浏览器不同

Posted 2023-03-05

【中文标题】IE 10-11 flex-basis 属性的行为与 webkit 浏览器不同

【英文标题】：IE 10-11 flex-basis property behaves differently than webkit browsers

【发布时间】：2015-03-22 23:05:04

【问题描述】：

我正在尝试使用Media object，它由Media-body 和Media-figure 组成。 html 和类遵循这种形式（顺序无关紧要）。

.Media
   .Media-figure
   .Media-body

简单的 CSS 是（无前缀）：

.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;
   */

请注意，我将 Media-figure flex-shrink 因子调整为 0（与我发布的链接相反）。我假设Media-figure 的大小是固定的，如果空间太小，我们宁愿不要让它变小。

将flex-basis: 0 用于Media-body 应该将元素设置为没有初始大小，然后允许它消耗剩余的可用空间，因为它是唯一具有flex-grow: 1 的元素。但是，在 IE10-11 中，flex-basis: 0 导致 Media-body 宽度为内部元素的宽度，如果内容过多，则会破坏任何包装行为。

http://jsfiddle.net/sgardn04/3enpp4wg/

（注意：如果您在 chrome 中查看这些内容，它们看起来会完全一样。使用 IE10-11！）

我目前的解决方法是设置Media-body flex-basis: auto ，这似乎可行。我假设 IE 在这里有问题，因为我更喜欢 webkit 浏览器的行为。是否有支持 IE 渲染的规范的合法解释？或者任何情况下，基于我在这里定义的类，我们可以期待 webkit 浏览器的不同行为？在这种情况下，这两个属性的行为似乎完全相同。

编辑：我发现了这个handy graphic，这似乎表明flex-basis 属性决定了空间是在考虑元素宽度之前还是之后分布（flex-basis: 0 与flex-basis: auto）。

【参考方案1】：

差异是由于flex-basis 的值没有单位。添加这个（或省略 0）会给你在 IE 中的预期行为：updated fiddle

flex 上的 MDN 文档提到了这一点：

首选尺寸 0 必须有单位 以避免被解释为灵活性。默认为 0% 时 省略。

【讨论】：

我一直在阅读文档并得出了相同的结论。 Microsoft 引用“由数字指定的宽度，后跟长度单位”。在他们的 MSDN 文档中，以及 MDN 状态“定义为一个数字后跟一个绝对单位，例如 px、mm 或 pt，或父 flex 容器主尺寸属性的百分比”

MSDN 还声明 flex 属性“您需要使用一个单元指定一个零弹性基础组件或在其前面加上两个弹性因子以避免误解或无效声明。” - 尽管使用 flex-grow 和 flex-shrink 原始代码应该基于该语句有效。该规范与 MSDN 一致，并指出“之前没有两个 flex 因子的无单位零必须解释为 flex 因子。为避免误解或无效声明，作者必须指定一个带有单位或前面有两个弹性因子。”