Question

我在桌子中使用Flexbox，而且它在IE 10和11中不起作用。在你告诉我停止使用该表之前，让我解释一下该表是否在供应商的代码中，我被问到了在我无法控制的HTML结构中工作。但我真的想使用flexbox，因此可以在任何屏幕宽度进行包装。

创建了一个小例子

我的目标如下：

在调整浏览器大小时，我需要像蓝色框一样包裹蓝色框。（在Chrome和其他浏览器中效果很好。）
我需要使用固定像素的柔性基础，如本例中的100px，而不是a 百分比。
我想让它在<td>表格单元格内部工作 table，tbody，tr和td没有任何固定的宽度设置。

（注意：我很清楚在IE 10上我将需要各种带前缀的CSS属性，例如“-ms-flex-wrap：wrap”而不是我正在使用的通用现代。但是在IE 11上，开发人员工具告诉我，我的jsfiddle中的那些被接受（没有划掉），所以我使用这个简化版本的代码来演示IE 11上的问题。）

以下是jsfiddle链接中的代码：

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

CSS：

.flex-cont {
   display: flex;
   flex-wrap: wrap;
}
.flex-myitem {
   flex: 0 0 100px;
   border:1px solid blue;
}
.flex-myitem-purple {
   flex: 0 0 100px;
   border:1px solid purple;
}

为了解决问题，我还尝试将外部table, tbody, tr and td设置为使用display: block。根据我的理解，这使它们与<div>s相同，并且它开始工作。但在这种情况下，我无法真正做到我的桌面标签。感谢您的帮助。

Answer 1

由于table元素不是块元素，因此它只会扩展到其内容大小，并且当允许flex项包装时，它们会这样做。

要使它们在表格中表现相同，您需要为表格提供与正文相同的宽度。

要使IE10运行，您需要添加前缀（-ms-）flex属性。

table {
  width: 100%;
  table-layout: fixed;         /*  for IE  */
}
.flex-cont {
   display: -ms-flex;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flex-myitem {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid blue;
}
.flex-myitem-purple {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid purple;
}

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

根据评论更新

使用table-layout: fixed;进行IE的修复可以在这里阅读更多内容： flexbox-not-working-inside-table

Answer 2

我使用浮动而不是flexbox工作。浮动的包装行为在IE 10和11上运行良好，其作用与flexbox包装相同，但没有浏览器问题。（这不是我的偏好，因为我希望将来出于其他原因使用flexbox的独特功能，但是对于这个简单的例子它完成了这项工作，我最终可能会采用这种方法。）下面的示例并发布在另一个JSFiddle上https://jsfiddle.net/skurhu46/2/

<table class="my-table">
  <tbody>
  <tr>
    <td style="padding:0">
      <table class="my-table">
        <tbody>
        <tr>
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
        </tr>
        </tbody>
      </table>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

和CSS：

.flex-cont {
   display: flex;
   flex-wrap: wrap;
}
.flex-myitem-purple {
   flex: 0 0 100px;
   border:1px solid purple;
}
.tbl-item {
  float: left;
  width: 100px;
  border:1px solid blue;  
  padding: 0;
}
.my-table {
  border-collapse: collapse;
}

Flexbox不会在IE 10和11

2 个答案: