Flex wrap 在 IE11 的 td 标签中不起作用

Posted 2023-03-06

【中文标题】Flex wrap 在 IE11 的 td 标签中不起作用

【英文标题】：Flex wrap does not working in td tag in IE11

【发布时间】：2021-07-10 07:00:13

【问题描述】：

此标记在 Chrome 中按预期工作。我可以使用 css 使其在 IE11 中工作吗？

    <table >
    <tr>
        <td>
            <div style="display: flex;justify-content: space-around;flex-wrap: wrap;">
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
            </div>
        </td>
    </tr>
</table>

【问题讨论】：

哪个版本的IE？ caniuse.com/?search=flex-wrap

添加有问题

【参考方案1】：

Internet Explorer 11 有时希望有明确的 width 值。所以我们可以改用display: grid。

一个例子：

td > div >   
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100px minmax(200px, 500px) 1fr;
    grid-template-columns: 100px minmax(200px, 500px) 1fr;

<table >
    <tr>
        <td >
              <div>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
                <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width=250 height=150></video>
            </div>
        </td>
    </tr>
</table>

【讨论】：

不工作，我怀疑是因为 td 标签。

@DenisMalakhov 尝试添加到td 标签，如<td style="width: 100%">

@DenisMalakhov 或<div style="display: flex;justify-content: space-around;flex-wrap: wrap;align-items: stretch;">

不工作。我猜 IE 不能在 td 中处理 flex-wrap。看起来像一个错误。

@DenisMalakhov 如果符合条件，请尝试使用dispaly: grid。请看我更新的答案。它有效