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

Question

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

    <table width="100%">
    <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>

Answer 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 width="100%">
    <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>