表上的Flexbox在Firefox中不起作用 [英] Flexbox on table doesn't work in Firefox

问题描述

使用flexbox来控制表格的布局在webkit浏览器中是有效的，但在Firefox中，< td> 只能渲染与自己内容一样宽。

演示：

根据 Flexbox最后呼叫工作草案，它是那个匿名表什么成为flex项，而不是表单元格：

display 触发创建匿名框
围绕原箱。这是最外面的盒子 -
的直接子对象 flex容器盒 - 这将成为 flex item 。对于
示例，给定两个连续的子元素与 display：table-cell ， anonymous table wrapper box generated around
they [CSS21] 成为 flex item 。

由于表格单元格不是flex项目，他们忽略了 flex 属性。它将应用于匿名表，但CSS选择器不能选择匿名元素。

但是，Chrome不同意规范，并决定阻止表单元格。 / p>

然后CSS工作组决定标准化Chrome的行为：

如果您有一个flex容器，它，它们
将不会独立地成为flex项目。它们将以匿名的
表格进行换行，这将是flex。

但是，Chrome已经实现了这样，每个项目都是独立的
a flex项目。 [...]所以它把表细胞变成块。

我在会议上看到至少一个演示文稿，他们花了
的优势为flex创建回退行为。 [...]如果你是
不尝试触发回退，我不知道为什么你会把一堆
表格单元格在flex和得到它包装在匿名的东西。 [...]

已解决：刚刚阻止flex和grid容器的孩子。
不要做匿名框修复

：< / p> $ b $ ... $ / $ / - / / flex-itemsrel =nofollow noreferrer b

display 通常会触发在原始框周围创建
个匿名框。如果此类框是 flex
item ，它首先被阻止，因此匿名框创建将
不发生。例如，两个连续的 flex项< a>与
display：table -cell 将成为两个单独的 display：block flex items ，而不是包装到单个
匿名表中。

然后，Firefox实现了从47版开始的新行为（错误1185140 ）。

对于旧版本，您可以手动将单元格设置为块：

  .flex-container> td {
 display：block; 
} 
  

  * {box-sizing：border-box;} table {border：1px solid #ddd; width：100％;} tbody {background：#fff;} tr {display：flex;} td {display：block;} td：first-child {flex：1180％背景：mistyrose;} td：nth-​​child（2）{flex：0 0 10％;背景：海蓝宝石;} td：nth-​​child（3）{flex：0 0 10％; background：pink;}  

 < table& < tbody> < tr> < td> Ted< / td> < td> 1< / td> < td> 100％< / td> < / tr> < tr> < td> Turd Ferguson< / td> < td> 2< / td> < td> 65％< / td> < / tr> < tr> < td> Hingle McKringleberry< / td> < td> 3< / td> < td> 99％< / td> < / tr> < / tbody>< / table>  

Using flexbox to control the layout of a table works in webkit browsers but in Firefox, <td>s only render as wide as their own content.

Demonstration: http://codepen.io/afraser/pen/wMgbzr?editors=010

* {
  box-sizing: border-box;
}
table {
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2) {
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3) {
  flex: 0 0 10%;
  background: pink;
}

<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
    </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
    </tr>
  </tbody>
</table>

I tried several variations on this including:

• Using flex-grow, flex-shrink, and flex-basis individually.
• Using pixels for the flex-basis instead of percents.
• Using table-layout: fixed.

I see nothing documenting this here: https://github.com/philipwalton/flexbugs and have come up dry elsewhere. Does anyone know what's going on?

解决方案

That's because, according to CSS tables, anonymous table objects should be generated when tabular elements are not children of a table:

According to the Flexbox Last Call Working Draft, it was that anonymous table what became the flex item, not the table cells:

Some values of display trigger the creation of anonymous boxes around the original box. It’s the outermost box—the direct child of the flex container box—that becomes a flex item. For example, given two contiguous child elements with display: table-cell, the anonymous table wrapper box generated around them [CSS21] becomes the flex item.

Since the table cells were not flex items, they ignored the flex property. It would apply to the anonymous table, but CSS selectors can't select anonymous elements.

However, Chrome disagreed with the spec and decided to blockify the table cells instead.

Then the CSS working group decided to standardize Chrome's behavior:

If you have a flex container and you put two table cells in it, they won't become flex items independently. They'll wrap in an anonymous table and that will be flex.

However, Chrome had implemented it so that each item is independently a flex item. [...] So it turns the table cells into blocks.

I've seen at least one presentation at a conference where they took advantage of this to create fallback behavior for a flex. [...] If you're not trying to trigger fallback, I don't know why you'd put a bunch of table cells in flex and get it wrapped in anonymous stuff. [...]

RESOLVED: Just blockify the children of flex and grid containers. Don't do anonymous box fix-up

The first Flexbox Candidate Recommendation was published with that new resolution:

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.

And then Firefox implemented the new behavior starting at version 47 (bug 1185140).

For older versions, you can style the cells as blocks manually:

.flex-container > td {
  display: block;
}

* {
  box-sizing: border-box;
}
table{
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td {
  display: block;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2){
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3){
  flex: 0 0 10%;
  background: pink;
}

<table>
  <tbody>
    <tr>
      <td>Ted</td>
      <td>1</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Turd Ferguson</td>
      <td>2</td>
      <td>65%</td>
     </tr>
    <tr>
      <td>Hingle McKringleberry</td>
      <td>3</td>
      <td>99%</td>
     </tr>
  </tbody>
</table>

这篇关于表上的Flexbox在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！