< table>中的Flex CSS属性在IE和Firefox上不起作用 [英] Flex CSS property in <table> doesn't work on IE and Firefox

问题描述

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

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

  table {background-color：white;}。child {padding：5px;边距：5px;背景颜色：#eee; border：3px solid;}。container {padding：2px;背景颜色：黄色；显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -webkit-flex-direction：行； -ms-flex-direction：行； flex-direction：行； -webkit-flex-wrap：包装; -ms-flex-wrap：包装； flex-wrap：包装; -webkit-justify-content：间隔； -ms-flex-pack：证明；证明内容：间隔； -webkit-align-content：中心; -ms-flex-line-pack：中心; align-content：居中； -webkit-align-items：拉伸; -ms-flex-align：拉伸； align-items：Stretch;}。child.one {颜色：绿色； -webkit-order：1; -ms-flex-order：1；顺序：1;}。child.two {颜色：紫色； -webkit-order：2; -ms-flex-order：2；顺序：2； flex-shrink：0;}。child.three {颜色：红色； -webkit-order：3； -ms-flex-order：3；顺序：3;}  

 < table style = width ：100％> < tbody> < tr class = container> < td class = child one align = left>一个< / td> < td class =两个孩子 align = center>二。 < Lorem ipsum< dol" amet< br>这是更长的行< / td> < td class = child 3 align = right>三个< / td> < / tr> < / tbody>< / table>  

请查看小提琴中的代码：

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

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

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

Flex项目（ https://drafts.c​​sswg.org/ css-flexbox-1 /＃flex-items ）

这建议应将flex项目更改为其等同于块级（如果它还不是块级元素） 。

草稿更进一步，并指出：

某些显示值通常会触发在原始框周围创建匿名框。如果这样的盒子是弹性物品，则首先将其封闭，因此不会发生匿名盒子的创建。例如，两个具有display：table-cell的连续flex项将变为两个单独的显示：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; 添加到表和 tbody

  table {背景颜色：白色；显示：块； / *需要换行才能在IE中正常工作* /} tbody {display：block; / *需要换行才能在IE * /}中正常工作。child {padding：5px;边距：5px;背景颜色：#eee;边框：3px实线； display：block;}。container {padding：2px;背景颜色：黄色；显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -webkit-flex-direction：行； -ms-flex-direction：行； flex-direction：行； -webkit-flex-wrap：包装; -ms-flex-wrap：包装； flex-wrap：包装; -webkit-justify-content：间隔； -ms-flex-pack：证明；证明内容：间隔； -webkit-align-content：中心; -ms-flex-line-pack：中心; align-content：居中； -webkit-align-items：拉伸; -ms-flex-align：拉伸； align-items：Stretch;}。child.one {颜色：绿色； -webkit-order：1; -ms-flex-order：1；顺序：1;}。child.two {颜色：紫色； -webkit-order：2; -ms-flex-order：2；顺序：2； flex-shrink：0;}。child.three {颜色：红色； -webkit-order：3； -ms-flex-order：3；顺序：3;}  

 < table style = width ：100％> < tbody> < tr class = container> < td class = child one align = left>一个< / td> < td class =两个孩子 align = center>二。 < Lorem ipsum< dol" amet< br>这是更长的行< / td> < td class = child 3 align = right>三个< / td> < / tr> < / tbody>< / table>  

I'm looking for a solution how to make the Flex property work on a table component across all three browsers (IE, Firefox and Chrome).

The following code works only on Chrome (even though -ms- and -webkit- prefixes added):

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>

Please look the code in fiddle: http://jsfiddle.net/ax961ys1/

解决方案

This would appear to be due to each .child element being display: table-cell; by default (expected as these are indeed table cells!).

In Chrome when you use the flexbox model on .container the .child elements are automatically converted into display: block; which enables flexbox to work.

In Firefox and IE the .child elements remain as display: table-cell;.

The latest W3C draft for the CSS Flexible Box Layout Module states:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

Flex Items (https://drafts.csswg.org/css-flexbox-1/#flex-items)

This suggests that flex items should be changed to its block-level equivalent (if it isn't already a block-level element).

The draft goes further and states:

Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.

Flex Items (https://drafts.csswg.org/css-flexbox-1/#flex-items)

In this instance it appears that this is something that Chrome is doing but IE and Firefox are not. The presence of the anonymous table and the fact that the .child elements are not blockified would seem to be the cause of the behaviour.

To obtain the same result in Chrome, IE and Firefox:

• Add display: block; to .child
• To ensure the .child elements wrap correctly in IE add display: block; to table and 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>

这篇关于< table>中的Flex CSS属性在IE和Firefox上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！