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

werasquez 发表于 Dev

Werasquez

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

下面的代码只适用于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/

隐藏的爱好

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

在Chrome中，当您使用flexbox模型时.container，.child元素会自动转换为display: block;使flexbox正常工作的元素。

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

CSS Flexible Box Layout Module的最新W3C草案指出：

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

Flex项目（https://drafts.csswg.org/css-flexbox-1/#flex-items）

这表明应该将flex项目更改为其等效的块级（如果它还不是块级元素）。

草案更进一步指出：

display的某些值通常会触发在原始框周围创建匿名框。如果这样的盒子是弹性物品，则首先将其封闭，因此不会发生匿名盒子的创建。例如，两个具有display：table-cell的连续flex项目将变为两个单独的display：block flex项目，而不是被包装到单个匿名表中。

Flex项目（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>