html – 桌面上的Flexbox在Firefox中不起作用

使用flexBox来控制表的布局在webkit浏览器中工作,但是在Firefox中,< td>只能像他们自己的内容一样宽.

示范：
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>

我尝试了几种变体,包括：

>单独使用flex-grow,flex-shrink和flex-basis.
>使用像素作为弹性基础而不是百分比.
>使用表格布局：固定.

我在这里看不到任何记录：https://github.com/philipwalton/flexbugs并在其他地方干涸.有谁知道发生了什么？

解决方法

这是因为,根据CSS表格,当表格元素不是表格的子元素时,应该生成 anonymous table objects：

根据Flexbox Last Call Working Draft,这是匿名表什么成为flex项目,而不是表格单元格：

Some values of 07003 trigger the creation of anonymous Boxes
around the original Box. It’s the outermost Box—the direct child of
the 07004—that becomes a 07005. For
example,given two contiguous child elements with 07006,the 07007 07008 becomes the 07005.

由于表格单元格不是弹性项目,因此忽略了flex属性.它适用于匿名表,但CSS选择器无法选择匿名元素.

但是,Chrome不同意该规范并决定封锁表格单元格.

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

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

first Flexbox Candidate Recommendation以新的决议发布：

Some values of 070012 normally trigger the creation of
anonymous Boxes around the original Box. If such a Box is a 070013,it is blockified first,and so anonymous Box creation will
not happen. For example,two contiguous 070014 with
070015 will become two separate 070016 070014,instead of being wrapped into a single
anonymous table.

然后Firefox从版本47(bug 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: 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>

原文地址：https://www.jb51.cc/html/227833.html