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>

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

Flex wrap does not working in td tag in IE11

css

internet-explorer

flexbox