html - Flex(Materialize valign-wrapper)在 IE 中不起作用

Question

所以我有一个带有一些自定义的物化集合。

<ul class="collection">
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">build</i>
        <span class="title">A</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">comment</i>
    <span class="title">B</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">description</i>
    <span class="title">C</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">content_copy</i>
    <span class="title">D</span>
</li>

我使用 valign-wrapper 垂直对齐 span 和 i。 valign-wrapper 使用 flex。

这些代码在 IE 中不起作用。

我目前的工作是添加

li span{
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}

有没有更好的方法让它可以跨浏览器工作？理想属于 valign-wrapper 并且不要添加太多侵入性代码。

Example

Answer 1

所以这里问题的答案必须从问题实际上不是 IE，而是 OP 假设使用 IE 渲染引擎的 Outlook 开始。

其实不然。 Outlook 使用 MS Word 呈现引擎来处理 HTML 电子邮件，这与 IE 完全不同，并且对于任何试图开发 HTML 电子邮件的人来说都有一大堆“陷阱”(尤其是因为大多数 HTML 电子邮件需要在还有一堆其他的电子邮件客户端，它们通常工作得更好)

我认为可以肯定地说 CSS Flex 将不受支持，但问题远不止于此。 This article探讨在为 Outlook 开发 HTML 电子邮件时会遇到的一些更常见的问题。这很糟糕。和 here's another, older article这可能会有所帮助。

我希望这对您有所帮助，尽管我怀疑它可能会让您感到有点无助。自 IE6 时代以来，微软已经取得了长足的进步，但 Outlook 的 HTML 渲染仍停留在黑暗的过去。 (就像 MS Word 一样，当然......但是没有人使用它来生成 HTML......他们是吗？他们是吗？？？真的吗？？!!)