如何在表中包装IE11中的弹性项？

Question

我有以下代码(代码在这里)，我需要在IE11中工作(因为它在正常的浏览器中工作).

卡片应该被包裹到显示的窗口中(不要横向的责骂，如果需要的话只能垂直)。

.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的情况。

我知道如果没有包装的“桌子”，这是可行的，但我不能改变它，所以请考虑保持这张表是.

Answer 1

将table-layout: fixed; width: 100%;添加到父.table包装器可以在IE11中为我修复这个问题。但是，除非需要显示表格内容，否则我建议不要在表布局中放置某些内容.无论如何，您确实希望使用语义<table>元素。

您可能需要全屏查看下面的片段，这取决于您的分辨率，这样才能看到它的堆叠/包装。在我的26“1080 p显示器的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>

​