<table> 中的 Flex CSS 属性在 IE 和 Firefox 上不起作用

Question

我正在寻找一种解决方案，如何让 Flex 属性在所有三种浏览器（IE、Firefox 和 Chrome）上的 table 组件上工作。

以下代码仅适用于 Chrome（即使添加了 -ms- 和 -webkit- 前缀）：

table {
  background-color: white;
}
.child {
  padding: 5px;
  margin: 5px;
  background-color: #eee;
  border: 3px solid;
}
.container {
  padding: 2px;
  background-color: yellow;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.child.one {
  color: green;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.child.two {
  color: purple;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  flex-shrink: 0;
}
.child.three {
  color: red;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

<table style="width:100%">
  <tbody>
    <tr class="container">
      <td class="child one" align="left">
        One
      </td>
      <td class="child two" align="center">
        Two.
        <br>Lorem ipsum
        <br>dolor sit amet
        <br>This is a bit longer line
      </td>
      <td class="child three" align="right">
        Three
      </td>
    </tr>
  </tbody>
</table>

请查看小提琴中的代码： http://jsfiddle.net/ax961ys1/

Answer 1

这似乎是因为每个 .child 元素默认为 display: table-cell;（预计这些确实是表格单元格！）。

在 Chrome 中，当您在 .container 上使用 flexbox 模型时，.child 元素会自动转换为 display: block;，从而使 flexbox 能够工作。

在 Firefox 和 IE 中，.child 元素仍为 display: table-cell;。

CSS 灵活框布局模块的最新 W3C 草案指出：

弹性项目的显示值是块化的：如果生成弹性容器的元素的流入子项的指定显示是内联级值，则计算为其块级等效值。 （有关此类显示值转换的详细信息，请参见 CSS2.1§9.7 [CSS21] 和 CSS Display [CSS3-DISPLAY]。）

弹性项目 (https://drafts.csswg.org/css-flexbox-1/#flex-items)

这表明应该将弹性项目更改为它的block-level equivalent（如果它还不是块级元素）。

草案更进一步并指出：

display 的某些值通常会触发在原始框周围创建匿名框。如果这样的盒子是一个弹性项目，它首先被阻塞，所以匿名盒子的创建不会发生。例如，两个带有 display: table-cell 的连续弹性项目将成为两个单独的 display: 块弹性项目，而不是被包装到一个匿名表中。

弹性项目 (https://drafts.csswg.org/css-flexbox-1/#flex-items)

在这种情况下，这似乎是 Chrome 正在做的事情，但 IE 和 Firefox 不是。匿名表的存在以及 .child 元素未被阻止的事实似乎是该行为的原因。

要在 Chrome、IE 和 Firefox 中获得相同的结果：

• 将display: block; 添加到.child
• 为确保.child 元素在IE 中正确换行，请将display: block; 添加到table 和tbody

table {
  background-color: white;
  display: block; /*Required for wrap to work correctly in IE*/
}
tbody {
  display: block; /*Required for wrap to work correctly in IE*/
}
.child {
  padding: 5px;
  margin: 5px;
  background-color: #eee;
  border: 3px solid;
  display: block;
}
.container {
  padding: 2px;
  background-color: yellow;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.child.one {
  color: green;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.child.two {
  color: purple;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  flex-shrink: 0;
}
.child.three {
  color: red;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

<table style="width:100%">
  <tbody>
    <tr class="container">
      <td class="child one" align="left">
        One
      </td>
      <td class="child two" align="center">
        Two.
        <br>Lorem ipsum
        <br>dolor sit amet
        <br>This is a bit longer line
      </td>
      <td class="child three" align="right">
        Three
      </td>
    </tr>
  </tbody>
</table>