如何在 table 内包装 IE11 中的 flex 项目？

Question

我有以下代码 (codepen here)，我需要在 IE11 中工作（因为它在普通浏览器中工作）...

卡片应该被包裹（没有水平卷轴，如果需要只有垂直）到显示的 window..

.table {display: table;}
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px;}

<div class="table">
<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
</div>
</div>

这不是 IE 的情况。

我知道没有包装 "table" 这会起作用，但我无法更改它，所以请考虑保持 table 原样...

Answer 1

将 table-layout: fixed; width: 100%; 添加到父 .table 包装器在 IE11 中为我解决了这个问题。但是，我建议不要将某些内容放在 table 布局中，除非您需要显示表格内容......并且无论如何您真的想为此使用语义 <table> 元素。

根据您的分辨率，您可能需要全屏查看下面的代码段才能看到它 stacking/wrapping。在我的 26" 1080p 显示器上，在 IE 中未最大化，由于网站柱状布局的最大宽度限制，它只显示一列。

.table {display: table; table-layout: fixed; width: 100%; }
.container {display: flex; flex-wrap: wrap;}

.card {width: 300px; height: 100px; background: green; margin: 2px; }

<div class="table">
    <div class="container">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
    </div>
</div>

如何在 table 内包装 IE11 中的 flex 项目？

How to wrap flex items in IE11 when inside table?

html

css

flexbox

internet-explorer-11