html - CSS Flex 布局选项卡调整大小在 IE 中不起作用

Question

我对 flex 布局有疑问。我准备了 FIDDLE 元素，通过调整输出框表单元格的大小，它们将在下面一对一。它适用于 chrome、firefox 和 IE，不适用于表格元素 tr、td ..

参见示例:My problem

CSS:

tr {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox !important;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

td {
    display: block;
}

.cell1 {

}

.cell2{
    width: 500px;
}

.cell3{
    min-width: 300px;
}

HTML:

<h1>real table</h1>
<table>
    <tr class="table">
        <td class="cell1">Cell 1</td>
        <td class="cell2">Cell 2</td>
        <td class="cell3">Cell 3</td>
    </tr>
</table>

<h1>div "table"</h1>
<div class="table">
    <span class="cell1">Cell 1</span>
    <span class="cell2">Cell 2</span>
    <span class="cell3">Cell 3</span>
</div>

感谢您的帮助!

已解决:要在 IE 中工作，必须设置 display: block on parents elements tr, table.. 现在它可以工作了!

Answer 1

IE 支持 tr 上的 flex-wrap，只要给 tr 一个明确的宽度。

由于您希望宽度基于窗口宽度，您可能需要使用 JavaScript:

window.onresize= function() {
  var flex= document.querySelectorAll('.table');
  for(var i = 0 ; i < flex.length ; i++) {
    flex[i].style.width= document.body.clientWidth+'px';
  }
}

window.onresize();

Fiddle