Question

在我的项目中，我需要操纵标准表以某种方式行事。我需要<td>作为列和行，具体取决于内容和分辨率（响应性）。

到目前为止，它在Chrome和FF中工作，但它在IE中完全搞砸了，我没有运气试图找出原因。

这是我的代码：

body {
  color: #fff;
}
table,
.line2,
.line3 {
  width: 100%;
}
tr {
  display: flex;
  flex-flow: row wrap;
}
td {
  margin: 1px;
}
.line1 {
  background: red;
  flex: 1;
}
.line2,
.line3 {
  background: blue;
}
.line3 {
  background: green;
}

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

我想要的是所有line1's为列，line2/3为以下行。

然而，在IE11中（我假设在下面）它们只是叠加成列，完全弄乱它。

我看过https://github.com/philipwalton/flexbugs但未能找到解决方案。

我做错了什么？这在IE中不起作用吗？

Answer 1

如您所知，IE11因许多“弹性错误”（details）而闻名。

例如，代码中的flex属性存在多个渲染问题（details）。

在这种特殊情况下，使用HTML表格元素似乎增加了混乱，而IE11只是不知道该怎么做。更具体地说，IE11在识别表元素的flex属性时遇到问题。

您还需要考虑tbody元素，这不是您需要包含的元素，但浏览器会自动添加到您的HTML结构中（因为tbody是required by the spec）。这会抛出flex格式化上下文，因为父子关系是必不可少的。

在IE11（和其他主流浏览器）中似乎有用的是在每个级别指定flex布局：

table {
  display: flex;
  width: 100%;
}
tbody {
  display: flex;
  flex-basis: 100%;
}
tr {
  display: flex;
  flex-basis: 100%;
  flex-flow: row wrap;
}
td {
  display: flex;
  flex-basis: 100%;
  flex-shrink: 0;
  margin: 1px;
}
.line1 { 
  flex-basis: 0; 
  flex: 1;
}
.line1 { background: red; }
.line2 { background: blue; }
.line3 { background: green; }
body { color: #fff; }

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

jsFiddle

Answer 2

感谢您的努力和时间 - 特别是Michael_B。

但是，我发现了一种更简单，更可能更合适的解决方案。只需给<td>一个display: block;

即可

因此无需为每个元素赋予flex属性。

关于我是否需要<tbody> - 我意识到浏览器会添加它，但我需要它来添加ListJS（js排序），因为它需要class="list"

Flexbox：作为行和列（IE帮助）

2 个答案:

jsFiddle