在表格内时如何在 IE11 中包装弹性项目？

Posted 2023-03-05

【中文标题】在表格内时如何在 IE11 中包装弹性项目？

【英文标题】：How to wrap flex items in IE11 when inside table?

【发布时间】：2019-06-11 19:36:03

【问题描述】：

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

卡片应该被包裹（没有水平的scoll，只有在需要时才垂直）到显示的窗口中。

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

我知道没有包装“表格”这将起作用，但我无法更改它，所以请考虑保持表格原样...

【问题讨论】：

表需求从何而来？

【参考方案1】：

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

根据您的分辨率，您可能必须全屏查看下面的代码段才能看到它的堆叠/包装。在我的 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>

【讨论】：

为了不破坏页面中的另一个逻辑，我需要保留 display: 表，所以你的解决方案对我有帮助！谢谢！