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

Question

使用flexbox控制表的布局在webkit瀏覽器中工作，但在Firefox中， <td>只能呈現與其自己的內容一樣寬。

演示： http ： //codepen.io/afraser/pen/wMgbzr？ edit = 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 。
• 使用像素作為flex-basis而不是百分比。
• 使用table-layout: fixed 。

我在這里看到沒有記錄這個： https ： //github.com/philipwalton/flexbugs並在其他地方干了。 有誰知道發生了什么？

Answer 1

這是因為，根據CSS表，當表格元素不是表的子元素時，應該生成匿名表對象 ：

根據Flexbox Last Call Working Draft ，匿名表是什么成為flex項，而不是表單元格：

某些display值會觸發在原始框周圍創建匿名框。 它是最外層的盒子 - 靈活容器盒的直接子盒 - 成為一個彈性項目 。 例如，給定兩個帶有display: table-cell連續子元素， 圍繞它們生成的匿名表包裝盒 [CSS21]將成為flex項 。

由於表格單元格不是彈性項目，因此忽略了flex屬性。 它將應用於匿名表，但CSS選擇器無法選擇匿名元素。

但是，Chrome不同意該規范並決定封鎖表格單元格。

然后CSS工作組決定標准化Chrome的行為：

如果您有一個Flex容器，並且在其中放置了兩個表格單元格，則它們不會獨立地成為彈性項目。 他們將包裝在一個匿名表中，這將是flex。

但是，Chrome已經實現了它，因此每個項目都是獨立的靈活項目。 [...]因此它將表格單元格變成了塊。

我在會議上看到過至少一個演示文稿，他們利用這個演示文稿為flex創建了后備行為。 [...]如果你沒有試圖觸發回退，我不知道你為什么要把一堆表格單元格放在flex中並用匿名的東西包裹起來。 [...]

解決：只是阻止flex和grid容器的子代。 不要做匿名的盒子修復

首個Flexbox候選推薦標准隨新決議發布：

某些display值通常會觸發在原始框周圍創建匿名框。 如果這樣的框是彈性項 ，則它首先被阻塞，因此不會發生匿名框創建。 例如，帶有display: table-cell兩個連續的flex項將成為兩個單獨的display: block flex項 ，而不是被包裝到單個匿名表中。

然后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: 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> 

Answer 2

我認為該問題涉及Flex項目的默認display值。

如果使用display: flex覆蓋它，則布局應該在瀏覽器中按預期工作。

進行以下調整：

td:first-child  { display: flex; }
td:nth-child(2) { display: flex; }
td:nth-child(3) { display: flex; }

修改了Codepen

我的第一個想法是確保每個td都應用了適當的display值 - 沿着display: flex-item行display: flex-item 。 但是， flex-item不存在，所以我使用display: flex 。

---

編輯

上面的解決方案。 此編輯與解釋有關。

在檢查規范時 ，似乎flex項目甚至沒有默認display值。 基本上，一旦您將父級設置為彈性容器，子級就會成為彈性項目，並接受彈性屬性，無論應用何種display規則。 因此，不需要默認display規則。

在這種情況下，似乎必須在flex項上聲明display: flex是使Firefox和IE工作所必需的怪癖。